Ekiras Blogs: AngularJs

Showing posts with label AngularJs. Show all posts

Angular : How to start angular CLI on custom port

Read

How to start Angular 2 Application on a Custom port other than 4200

You can start the angular project using the angular cli using command

ng serve

The above command will start the project on port 4200. If you want to start the application on a prot different that 4200 then you can start the project using the following command.

ng serve --port <port-number>

where <port-number> can be any valid port that is not in use.

Read More Add comment

Angular : How to start angular CLI on custom port

Reviewed by Ekansh Rastogi on 12:52 Rating: 5

Angular : How to Inject Nested Service in Component

By Ekansh Rastogi

Read

0 Comments

How to Inject Nested Services in Component

Let's create a service url.service.ts that will will be injected in other services.


import { Injectable } from '@angular/core';

@Injectable()
export class UrlService{
    // business logic
}

Now lets create another service http.service.ts that will Inject this service.

import { UrlService } from './url.service.ts';

export class HttpService extends UrlService{
    // business logic
}

Now, we need to inject the HttpService in some component to make http calls. So now we can inject the HttpService in component as shown below.

import { Component ,OnInit } from '@angular/core';

import { UrlService } from './url.service.ts';
import { HttpService } from './http.service.ts';


@Component({
    selector : 'some-selector',
    templateUrl : 'some.html',
    providers: [HttpService, UrlService]
})
export class SomeComponent implements OnInit{
     // business logic
    constructor(private httpService:HttpService){
        // do something
    }

    ngOnInit(): void {
     
    }
    
}

Note

So, the important point to note here is we have provided both UrlService and HttpService in the provides but only the HttpService in the constructor.

You need to add all the services in the providers array of the Component but add only the service you want to the constructor.

Read More Add comment

Angular : How to Inject Nested Service in Component

Reviewed by Ekansh Rastogi on 18:38 Rating: 5

Angular : Getting started with Angular with Angular CLI, Installation and Hello World Example

By Ekansh Rastogi

Read

0 Comments

Install and Setup Angular

Before we start, lets install the angular cli with the following command

npm install -g @angular/cli

Angular CLI is a tool that can

make a new project,
compile your typescript files,
configure your typescript compiler
run your code with live preview,
build and package your project.

Note

Make sure you have latest node and npm installed, at least node version 6.9.x and npm version 3.x.x. To see the versions you can run commands node -v and npm -v for node and npm versions respectively.

Warning

While installation you might get the following warning

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/@angular/cli/node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

You can skip them, since they are optional warnings

Making First Angular Project

To create a new project in angular you can use the angular cli command

ng new <project-name>

Let's say we want to create a project hello then the command will be ng new hello. This will create a new project inside a folder hello we specified while creating the project.

Now go inside the directory. You can do the following now,

Run ng serve for a dev server.
Run ng generate component component-name to generate a new component.
Run ng build to build the project.
Run ng test to execute the unit tests via Karma
Run ng e2e to execute the end-to-end tests via Protractor

Now run the commands to see the app working

cd  <project-name>
ng serve

This will start a local server and start the angular application on this server.

Read More Add comment

Angular : Getting started with Angular with Angular CLI, Installation and Hello World Example

Reviewed by Ekansh Rastogi on 17:52 Rating: 5

Angularjs RouteParams with ngRoute

By Ekansh Rastogi

Read

0 Comments

Points To Remember

You should pass the params separated by "/".
You can pass the params to the controller and pass them to the templates or apply logic.
You need to add $routeParams input to your controller function to get these params.

How to pass Params from one state to another in AngularJs using ngRoute.

You need to add the route params along with the url e.g you can send the params as follows

 #url/param1/param2

This is how you can update your $routeProvider to use these route params.

Finally, access the params in the controller and pass them to the template.

Putting everything together the code will work as shown in the plunk below.

Read More Add comment

Angularjs RouteParams with ngRoute

Reviewed by Ekansh Rastogi on 21:40 Rating: 5

How to use AngularJs Expressions

By Ekansh Rastogi

Read

0 Comments

Points To Remember

You can evaluate angular expressions by the following ways

using interpolation {{ }}
using ng-bind

Examples of AngularJs Expressions

Following are the ways you can use the angular expressions.

Mathematical calculations
String operations
Json operation
Array operations

You may want to see ng-init.

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  </head>

  <body ng-app="" ng-init="firstName='Ekansh';lastName='Rastogi';json=[{'name':'user1','age':'18'},{'name':'user2','age':'24'}];array=[0,1,2,3,8]">
    <div ng-bind="firstName + ' ' + lastName"></div><hr/>
    
    String operation ->{{"Hello" +" " + "World!" }}<hr/>
    
    Math operation -> {{2 * 5 }}<hr/>
    
    String &amp; Math operation ->{{"10 * 15 * 84  = "  + (10 * 15 * 84)}}<hr/>
    
    Json Operation ->{{'name = ' +json[0].name + ' age =' + json[0].age}}<br/>
    
    {{'name = ' +json[1].name + ' age =' + json[1].age}}<hr/>
    
    Array operation -> <span ng-bind="{{array}}"></span>
  </body>

</html>

The above code will give you the following output.

Read More Add comment

How to use AngularJs Expressions

Reviewed by Ekansh Rastogi on 21:14 Rating: 5

Introduction to AngularJS

By Ekansh Rastogi

Read

0 Comments

Setting up AngularJS.

All you need to do is

Download the AngularJs script from https://angularjs.org/.

You can use the AngularJs cdn

http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js

Add the Angular Js ng-app="" tag to initialize the angukar application.
Add the angularjs script to the Html page and you are good to go

<!DOCTYPE html>

<html>
  <head>

    <link rel="stylesheet" href="style.css">

    <script src="script.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>

  </head>
  <body ng-app="">
    <h1>{{"Hello" +" " + "World!" }}</h1>
  </body>

</html>

The above code will give you the following output.

Read More Add comment

Introduction to AngularJS

Reviewed by Ekansh Rastogi on 16:48 Rating: 5

Different ways to bind Elements to Model in AngularJs

By Ekansh Rastogi

Read

0 Comments

Different ways to Bind Elements to Model/ Directives

You can bind the Angular Elements to the Model in the following ways.

  <span ng-bind="name"></span> <br/>
  <span ng:bind="name"></span> <br/>
  <span ng_bind="name"></span> <br/>
  <span data-ng-bind="name"></span> <br/>
  <span x-ng-bind="name"></span> <br/>

Remove the x- or data- from the start of the element attributes.
e.g data-ng-bind and x-ng-bind can be written as ng-bind
Convert the delimiters like :, -, _ to camelCase.
Since the Html is case insensitive you can not use camelCase and you can use delimiters like :, -, _ to write your directives/angular .

So the above ways are
Following example in the Plunk shows the various ways to write our angular directive.

Now most of the above code works perfectly with angular js but they may cause HTML validation to fail. So if you want your code to be Html validatable then you should use

 <span data-ng-bind="name"></span>

Read More Add comment

Different ways to bind Elements to Model in AngularJs

Reviewed by Ekansh Rastogi on 13:06 Rating: 5

How to escape Html in Angular js

By Ekansh Rastogi

Read

0 Comments

Points To Remember

You need to use SCE to render html as it is on the page.
There are two ways to use sce either you use it in the angular controller to prevent escape html or you can create a filter to do this where ever you need it.
Using it with a filter is a much better way to do so, if you need to do it at multiple places.

Following Plunker example shows how you can prevent escaping of Html

Prevent Escape Html from angularjs Controllers

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>

<body ng-app="demo">
<div ng-controller="home">
  Original Text : {{text}}<br/><br /><br />
  EscapedText   : <span ng-bind-html="text"></span>

</div>

<script>
var app = angular.module("demo",[]);

app.controller('home', function ($scope, $sce) {
    $scope.text = $sce.trustAsHtml("hi this is a <b>demo text</b> <br> <a href='#'>This is a link</a>");
});


</script>

</body>
</html>

Using this method you can prevent escape any value and display it as html.

Prevent Escaping Html using angularjs Filter

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>

<body ng-app="demo">
<div ng-controller="home">
  Original Text : {{text}}<br/><br /><br />
  EscapedText   : <span ng-bind-html="text | escapeHtml"></span>

</div>

<script>
var app = angular.module("demo",[]);

app.filter('escapeHtml', function($sce) {
    return function(val) {
        return $sce.trustAsHtml(val);
    };
});

app.controller('home', function ($scope) {
    $scope.text = "hi this is a <b>demo text</b> <br> <a href='#'>This is a link</a> ";
});


</script>

</body>
</html>

The above code will give the following output.

Using this method you can show the render the html using the filter escapeHtml wherever needed.

View and Download from Plunker

Read More Add comment

How to escape Html in Angular js

Reviewed by Ekansh Rastogi on 01:09 Rating: 5

Older Posts Home

Subscribe to: Posts ( Atom )

Ekiras Blogs

Angular : How to start angular CLI on custom port

How to start Angular 2 Application on a Custom port other than 4200

Angular : How to Inject Nested Service in Component

How to Inject Nested Services in Component

Angular : Getting started with Angular with Angular CLI, Installation and Hello World Example

Install and Setup Angular

Making First Angular Project

Angularjs RouteParams with ngRoute

Points To Remember

How to pass Params from one state to another in AngularJs using ngRoute.

How to use AngularJs Expressions

Points To Remember

Examples of AngularJs Expressions

Introduction to AngularJS

Setting up AngularJS.

Different ways to bind Elements to Model in AngularJs

Different ways to Bind Elements to Model/ Directives

How to escape Html in Angular js

Points To Remember

Following Plunker example shows how you can prevent escaping of Html

Prevent Escape Html from angularjs Controllers

Prevent Escaping Html using angularjs Filter

Recent Posts

Facebook