Skip to main content

Posts

Showing posts with the label AngularJs

Angular : How to start angular CLI on custom port

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.
Post a Comment
Read more

Angular : How to Inject Nested Service in Component

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]...
Post a Comment
Read more

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

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":...
Post a Comment
Read more

Angularjs RouteParams with ngRoute

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.
Post a Comment
Read more

How to use AngularJs Expressions

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 op...
Post a Comment
Read more

Introduction to AngularJS

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. Loading plunk...
Post a Comment
Read more

Different ways to bind Elements to Model in AngularJs

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. Loading plunk... Now most of the above code works perfectly with angular js but they may cause HTML validation to fa...
Post a Comment
Read more

How to escape Html in Angular js

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 Loading plunk... 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.trustAs...
Post a Comment
Read more