Advantages of Angular JS: Angular JS is a powerful JavaScript based development framework to create Rich Internet Application (RIA). Angular JS provides developers – the option to write client side application using JavaScript in a clean MVC (Model View Controller). Angular JS provides capability to create a Single Page Application (SPA). In a SPA, the…
Creating a project with Angular4 Material from beginning on wards: Create a new project >ng new hg_material1 Once command has entered then navigate to hg_material1 folder and open in any IDE. Here am working on Visual studio code IDE. >cd hg_material1 Now Install the dependencies by following through below command: > npm install –save @angular/material…
Angular JS : Angular JS is a very powerful, Open source, structural JavaScript framework for developing dynamic web applications. Angular JS is purely for client side. Angular JS is maintained by Google. Angular JS provides its own runtime environment, compile process at client side. Dynamic Web Applications: Using Angular JS we can develop client side…
Angular JS Environment Setup To build AngularJS application only one script is required. Download Angular JS from https://angularjs.org/ Click on “Download Angular JS1” Branch: 1.5.x (Stable) Build: zip Download Angular – 1.5.0.zip Extract it Include Angular.js (Development Version) or Angular.min.js (Production Version) in our HTML document. Or We can use the CDN (Content Delivery Network).…
Modules and Controllers: Angular JS supports modular approach. A module is container for different parts of your application i.e., controllers, services, filters, directives etc to keep the code clean. We define modules in separate JavaScript files. Why module is required? Modules are like main() method in other types of applications. Modules are the angular equivivalent…
Angular JS ng-src directive Angular JS ng-src directive: <img src= “{{country.flag}}”> Using a binding expression with the image “src” attribute results in a 404 error (File not found) Hard conding: (No errors) <div ng-controller=”myController”> <img src=”images/india.jpg”> </div> E.g.: Myapp.js: Var myApp=angular.module(‘myApp’,[]); Var myCtrl=myApp.controller(‘CountryCtrl’,function($scope) { Var country={ Name: ‘INDIA’, Capital:’Delhi’, Flag: ‘images/india.jpg’ }; $scope.country=Country; }); Country.html:…
Two way data binding in Angular JS The two way data binding keeps the model and the view in sync at all times that is change in the model updates the view and change in the view updates the Model. Binding expression updates the view when the model changes {{message}}. Ng-model directive updates the model…