Angular Help

I am attempting to use ngCookies to get user cookies data.
I am getting an error which states:

uncaught TypeError: Cannot read property 'module' of undefined
at angular-cookies.js:19
at angular-cookies.js:253

angular.module('ngCookies', ['ng']). // This is line in error twice

What am I missing.

Isaac

(function () {
    var app = angular.module('associatesProfileApp', ['ngCookies']);
    app.controller("associatesprofileController", function ($scope, $cookies) {

function SetCookiesForDebugging() {
            alert("in SetCookies");
            var thecookie;
            var thecookie = "departid=351&jobtitle=Digital+Developer+Sr&floor=0&username=ij25405&ps%5Fdeptname=Digital+Experience&ps%5Fdeptid=351&cost%5Fcenter=351&birthday%5Fday=16&birthday%5Fmonth=7&fsla=Exempt&psdeptname=Digital+Experience&managerwholename=Lawrence+Raffel&area=215&mailstop=%2D+None+Selected+%2D&managerid=21286&departmentid=0&extension=4844971263&emplid=ij25405&managerusername=LR22638&deptname=KY+Exec+Dir&cubeoffice%5Fno=+&ismanager=0&email=tmruk%40amerihealthcaritas%2Ecom&lob=1&fname=Isaac&is%5Fuserlive=1&psdeptid=351&url=%23&costcenter=351&lname=Johnson&company=KEY&managerphone=2159378142&is%5Fmanager=0&wholename=Isaac+Johnson&id=13332&building=0&guest="
            document.cookie = thecookie
        }

        function SetUser(getCookie) {
            alert("in getCookie")
            var manager = getCookie("ismanager");
            $scope.IsManager = (manager

Open in new window

…

14 Comments

CompTIA Cloud+

LVL 13

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

My angular js controller will not populate html. I put in alerts which tells me my controller interface with html
is not working. none of the alerts appear.

What am I missing or doing incorrectly. I am attempting to emulate getting cookie data
which I eventually will have to do.

Thanks for help in advance,
Isaac

var app = angular.module("associatesProfileApp", []);
app.controller("associatesprofileController", function ($scope) {

    function SetCookiesForDebugging() {
        alert("in set")
        var thecookie;
        var thecookie = "departid=351&jobtitle=Digital+Developer+Sr&floor=0&username=ij25405&ps%5Fdeptname=Digital+Experience&ps%5Fdeptid=351&cost%5Fcenter=351&birthday%5Fday=16&birthday%5Fmonth=7&fsla=Exempt&psdeptname=Digital+Experience&managerwholename=Lawrence+Raffel&area=215&mailstop=%2D+None+Selected+%2D&managerid=21286&departmentid=0&extension=4844971263&emplid=ij25405&managerusername=LR22638&deptname=KY+Exec+Dir&cubeoffice%5Fno=+&ismanager=0&email=tmruk%40amerihealthcaritas%2Ecom&lob=1&fname=Isaac&is%5Fuserlive=1&psdeptid=351&url=%23&costcenter=351&lname=Johnson&company=KEY&managerphone=2159378142&is%5Fmanager=0&wholename=Isaac+Johnson&id=13332&building=0&guest="
        document.cookie = thecookie
    }
     
    {
        function SetUser(thecookie) {
            //alert("in setUser")
            var manager = thecookie("ismanager");
            $scope.IsManager = (manager == 0) ? false : true;
            $scope.UserId =

Open in new window

…

3 Comments

Architecture advice

So from a full pipeline infrastructure to develop and then deploy a web application what would you all recommend as best practice.

The items I do know at this point is I will be using the latest .net and angular frameworks for the application. There will be a SQL backend.

My company wants this application to be deployed using CI/CD techniques.

We will have an Azure storage along with utilizing Docker.

I dont know much more but wanted to get an idea of what this architecture should look like as a developer.

I would imagine working locally in visual studio...perhaps there are some item you need to think about upfront for .net and angular apps while developing knowing that you will push to azure via a docker container.

Also at this point should I be thinking about .net versus .net core.

I plan on watching some videos and doing more reading but wanted to start with this as a place to get ideas of how this should be setup at a high level
from the architecture point of view dev through test and prod.

2 Comments

Hi,
I want to implement mapping functionalities within an Angular 7 project that will include map clusters, polygons, circles etc on a Google Map. I have a PrimeNg Angular Map control and I know that I will need to integrate this with the Google Map SDK in order to handle map clustering as there is nothing in the PrimeNg documentation that describes how PrimeNg does this.

Has anyone done something similar to this before and if so can they point me in the right direction? Or on the other hand are there any open source plugins that will allow an Angular Project to interact with the Google SDK in an Angular way (i.e. without Javascript direct DOM Manipulation but using Angular Binding, Change detection etc).

Thanks

7 Comments

Need a few ideas on how to code sample data to test my Kendo UI controls

I will be using Kendo UI, Angular and jQuery on my next project. So, I assume the client will have different Kendo UI controls to test. So, the best way to test them is to populate them with dummy data, since the back-end work may not be up to speed yet.

So, please provide one or more Javascript samples which I could use to store the sample data.

I guess a multi-dimensional Array is pretty common in Javascript, BUT, it would also help if you also have the Javascript wrapper which returns the sample set of data as JSON and XML.

Thanks

6 Comments

Need a simple Visual Studio jQuery test environment.

I expect to be working in Visual Studio on a project which will involve Angular, Kendo UI and jQuery. So I need to set up a simple Visual Studio test environment where I can play around with some of the more complex jQuery commands.

What is the best way to do this in Visual Studio? I feel like I need a solution with an HTML file and a folder that contains jQuery. But feel free to suggest a few steps that can get me to that point.

And please include the steps to get jQuery installed. I assume that is just a NuGet call. But what about other dependencies?

Thanks.

4 Comments

Does Angular 7 NEED jQuery?

I will be starting a new project which includes:

KendoUI
Angular 7
jQuery

but my experiences with Angular 4 showed me that when you think you need jQuery, you have not looked hard enough at solving the problem using the features of Angular.

But I see this association between Angular, Kendo UI and jQuery.

https://www.progress.com/kendo-ui

How do these all fit together?

Curious.

Thanks,

2 Comments

Upgrading Angular 4 to Angular 7

I will be coding with Angular 7 in the near future and need to upgrade a project I created with Angular 4. This will be part of my preparation.

What steps need to be taken?

Thanks.

3 Comments

I am upgrading a site from javascript and jquery to Angular 7.

The site makes API calls to a server to deliver the HTML code.

What I am running into is that the code that comes from the server does not work. For example, here is a test example from my html component that shows the problem.

<div [innerHTML]="pageInfo.text | safeHtml"></div>
<p><button class="btn btn-default" (click)="btnclck('btngo')">Test</button></p>

Open in new window

The first line is loaded in on initiation when the site loads and then changes when you move to a new page.
The second is a test line that I placed in there just to illustrate my problem.

The second line works exactly as it is supposed to.

But if the same button code comes in from an api read from the database, it doesn't work.

If you look at the code in the code inspector, you will see that the Angular coding has been applied to the second, but not to the first.

My assumption is that because this dynamic text is loaded after the rest of the site, the angular coding is not applied to the button tag and as such, the onclick doesn't work.

How do I get around this?

The code has to come dynamically from a database.

8 Comments

Does MVC.Razor have a future?

How do Angular and React co-exist with Razor? Or is it a binary choice?

Either, MVC.Razor OR Angular OR React?

Curious.

Thanks.

4 Comments

OWASP Proactive Controls

LVL 13

Learn the most important control and control categories that every architect and developer should include in their projects.

I am using Angular 7 to make an API call to a database and it returns some user data (id, nameline, email);

OVERVIEW OF WHAT WORKS
In the .ts file I am saving this user data to local storage in this way:

localStorage.setItem('user', JSON.stringify(api.data));

Open in new window

Then on another page (Page1Component) I retrieve the data in this way. The "alert" at the end properly displays my user ID which is what I want.

export class Page1Component {
    myuser = JSON.parse(localStorage.getItem('user'));
  });

  ngOnInit() {
    alert("MyPOPID is ["+this.myuser.id+"]");
  }
}

Open in new window

QUESTION TO MAKE IT BETTER:
But my question is, instead of putting the myuser command in the "export class statement" of every page, is there a way to have the "myuser" variable be placed in someplace like the app.module.ts file and then have it be available to all children components under it? If so, how would that be done. What would I need in my app.module.ts file and what would I then need in my Page1Component.ts file.

5 Comments

I have a WebAPI that I am testing which uses intialized list and id as parms passed to to model.
It's works fine using postman but when I try to pass the list parm to the controller for a
request using html and angularjs it does not work. I get the following error?

Failed to load resource: the server responded with a status of 404 (Not Found)

<Error>
<Message>
No HTTP resource was found that matches the request URI 'http://homedev.kmhp.com/API/favorites/api/favorites/get_favorites/,RBUCK'.
</Message>
<MessageDetail>
No type was found that matches the controller named 'favorites'.

Preceding the comma before the parm RBUCK should be the initialized list for the angularjs call to the WebApi
How do I define the list in AngularJS?
I have included code snippets fro angularjs, html, WebApi (controller and model)

//Angularjs code

app.controller("handleFavoritesController", function ($scope, $http) {

    // Get Favorites
    $scope.get_favorites = function () {
       
        $scope.favInRequest = [];
         var data = {
            
            fav_uid: ""
            
            };
            fav_uid = document.getElementById('favuserid').value
            $http({
                method: "GET",
                url: "/API/favorites/api/favorites/get_favorites/" + $scope.favInRequest + "," + fav_uid + " "
            }).then(function (data, status, headers, config) {

                $scope.FavInRequest = response.data

Open in new window

…

HTML
Angular

5 Comments

In Angular 7, I am trying to determine how to pass a button value through from the typescript to the html page.

This is the most simple way I can illustrate what I would like to do.

The .ts file contains this:

this.lessonbody = '<button>Continue</button>';

Open in new window

And in the HTML I'm using this:

        <div [innerHTML]="lessonbody" class="mainbody"></div>

Open in new window

Is there a way to pass that button tag from the .ts file to the .html?

What I am trying to accomplish here is send a code to an API that pulls information from a database and then the whole page is painted from that data. But in order to do this, I need to pass the full html code for things like buttons.

My full code for the .ts file is here:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators, } from '@angular/forms';
import { DomSanitizer } from '@angular/platform-browser';

import { Pagecode } from "../../models/pagecode";
import { PagecodeService } from '../../services/pagecode.service';


@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  lessonhead = "";
  lessonbody = "";
  lessonbutton = "";
  pgref = "0.1";
  loading = false;
  constructor(
    private fb: FormBuilder, 
    private pS: PagecodeService, 
    private sanitizer: DomSanitizer, 
    private router:

Open in new window

…

6 Comments

I have an Angular 7 Website that I developed on my local machine that works fine when I do a direct link to a page on my localhost.

http://localhost:4200/signin

But when I then deploy the site to a public server, the site only works when I go to the root.

This Works:
http://makeyourlifecount.org

This Does NOT Work!
http://makeyourlifecount.org/signin

I get an error message on the NOT work link that reads:

Not Found
The requested URL /signin was not found on this server.
Apache/2.2.34 Server at makeyourlifecount.org Port 80

I am not sure where to begin looking to try to solve the problem. There is no .htaccess file on this server. Do I need one?

Why would the direct access work on my local machine and not on the public server. Thanks.

HTML
Angular

1 Comment

I have a WebAPI which executes properly under postman. I am trying to find out what I am doing
incorrectly when accessing my code via a html file. I'm not sure whether I need to add a function in
the javascript controller to access the input in the html to use as part of the parameters to access
successfully the code to return the result set. I am using an arraylist and a parameter. The parameter
is presented in the html. I'm a correct in thinking I need a function in my AngularJS controller
to get the parameter from the html.

See Code snippets for javascript controller, html, my controller and model.
Am I referencing the correct model(ng-model) in my html?

app.controller("handleFavoritesController", function ($scope, $http) {

    //Favorites - javascript controller

    $scope.favoritesInsert = {
        fav_uid: "",
        fav_link: "",
        fav_title: ""


    };
    $scope.get_favorites = {
        favuserid: "",
        favInRequest: ""

    }


    $scope.get_favorites = function () {
        $http.get("/API/favorites/api/favorites/get_favorites/" , $scope.fav_InRequest, $scope.favuserid).then(function (data, status, headers, config) {
            $scope.favInRequest = response.data
            alert("success");
        }, function (data, status, headers, config) {
            console.log("error!");
            console.log(data);
        });
    };

Open in new window

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

Open in new window

…

6 Comments

What are the Big Differences between Angular 4 and Angular 7?

Thanks

2 Comments

Upgrading Angular 4 to Angular 6

I have a small and working Angular 4 project, but would like to make the switch to Angular 6. How do I do this?

What are the odds it will work with no changes?

Here's a sample of the code:

import { Component, Input, OnInit } from '@angular/core';
import { NgFor } from '@angular/common';
import { PuzzlePieceComponent } from '../puzzlepiece/puzzle-piece.component';

@Component({
  selector: 'puzzle-canvas',
  templateUrl: './puzzle-canvas.component.html',
  styleUrls: ['./puzzle-canvas.component.css']
})

export class PuzzleCanvasComponent implements OnInit {
  title = 'Puzzle Peace';
  @Input() piece:PuzzlePieceComponent;
  pieces = [];
  rowNames = [];
  columnNames = [];
  columns:number = 8;
  rows:number = 5;

  constructor() { 
    this.rowNames = ['1', '2', '3', '4', '5' ];
    this.columnNames = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H' ];
  }

  fireEvent(e){
      console.log(e.type);
  }

  ngOnInit() { 
    let index = 0;
    for(let row = 0; row < this.rows; row++) {
      for(let column = 0; column < this.columns; column++) {
        this.pieces[index] = new PuzzlePieceComponent();
        this.pieces[index].id=index;
        this.pieces[index].row = this.rowNames[row];
        this.pieces[index].column = this.columnNames[column];
        index++;
      }
    }
  }
}

Open in new window

3 Comments

I am trying to format the current date in my angularjs controller but the date is not being created
and passed to the API.

Am I using the correct syntax to create the mmddyy parm to pass to the API
This date will be used in the html ie, {{picdate}}

var app = angular.module('lobTotalsApp', []);
// Step 1 Execute API after creating date to passin
app.controller("LobTotalsController", function ($scope, $http) {
    $scope.Picture = function () {

        var picDate = format(Date(month(now()), day(now()), year(now())), "mmddyy")
        $http.get("/API/picture-of-the-day/api/PicOfTheDay/getpicbydate/" + picDate).then(function (response) {

            $scope.picDate = response.data
            
            
            alert("Capture success");
        }, function (error) {
            console.log(error);
        });
    };
//  This is first step in the Controller

Open in new window

HTML
Angular

8 Comments

Getting up and running with REACT

I have developed using Angular 4, JQUERY and JavaScript, but not yet with React.

I have a MacBook and use Visual Studio Code on the Mac for my work with Angular 4 and hope to do the same with React.

How do I get React installed so I can start programming it? And same projects / tutorials you can point me to that would be a great start for me?

Thanks!

3 Comments

Exploring SharePoint 2016

LVL 13

Explore SharePoint 2016, the web-based, collaborative platform that integrates with Microsoft Office to provide intranets, secure document management, and collaboration so you can develop your online and offline capabilities.

how to refer Absolute path in protactor. provided below is my folder structure and my current working directory is Level3ab and I want to refer file ABC.exe. I trying with the relative path i.e. '../../../Level2/ABC.exe' but no luck in the .ts file. Is there anything I could do to get the right path here?

Root
        Level1
        Level2
                   Level2a/ABC.exe
        Level3
                   Level3a
                   Level3b
                                 Levell3b1
                                                 Level3b2 <-- current working directory

Open in new window

3 Comments

Angular: Please explain diff between Constructor and ngOnInit()

What kinds of things are done in either function?

hanks

3 Comments

Where does the "fireEvent(e)" function get defined?

In my working code here, I see I added that function. Is it possible to tell me the origins of the call from this source code?

import { Component, Input, OnInit } from '@angular/core';
import { NgFor } from '@angular/common';
import { PuzzlePieceComponent } from '../puzzlepiece/puzzle-piece.component';

@Component({
  selector: 'puzzle-canvas',
  templateUrl: './puzzle-canvas.component.html',
  styleUrls: ['./puzzle-canvas.component.css']
})

export class PuzzleCanvasComponent implements OnInit {
  title = 'Puzzle Peace';
  @Input() piece:PuzzlePieceComponent;
  pieces = [];
  rowNames = [];
  columnNames = [];
  columns:number = 8;
  rows:number = 5;

  constructor() { 
    this.rowNames = ['1', '2', '3', '4', '5' ];
    this.columnNames = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H' ];
  }

  fireEvent(e){
      console.log(e.type);
  }

  ngOnInit() { 
    let index = 0;
    for(let row = 0; row < this.rows; row++) {
      for(let column = 0; column < this.columns; column++) {
        this.pieces[index] = new PuzzlePieceComponent();
        this.pieces[index].id=index;
        this.pieces[index].row = this.rowNames[row];
        this.pieces[index].column = this.columnNames[column];
        index++;
      }
    }
  }
}

Open in new window

13 Comments

Making an HTTP Request using Angular 4

I got this question today in an interview and used it to explain the elements of an Angular 4 Component:

selector
templateURL
styleURL

and what these mean to making a component something you can easily import into another Angular 4 component.

How would you have answered that?

"How do you make an HTTP Request using Angular 4?"

Thanks

3 Comments

Getting my Angular 4 application running again on my MacBook

I have not run this app for months and also upgraded my MacOS to Mojave weeks ago. And now I need to run my Angular 4 program from Visual Studio Code.

I have forgotten exactly how to force it into debug mode. Or, even run without debugging mode. I need to test if it still works.

How can I do this?

I assume I need to open Terminal and start the Node Angular server. How do I do this?

Thanks.

3 Comments

Hello,

I am using obout custom control Grid for an application which is in ASP.NET web forms .
I want to replace this obout Grid with any other non-paid alternative control [like ng-grid in angularjs or so]
Can anyone tell how to replace obout Grid control with an alternative one which is equally good. If if yes , can you share an example of the same ?

1 Comment

Angular

Related Topics

Angular

Related Topics