Starting with angular js
Download as PPTX, PDF0 likes36 views
This document provides an overview of the steps to create a basic AngularJS application, including referencing the AngularJS framework, defining an Angular module, adding controllers, using directives like ng-app and ng-controller, binding the view to the model with ng-model, and implementing two-way data binding between the view and model.
![ This single line of code defines module named “hackApp,” which will also
be used to connect controllers to the application.
The script needs to then be referenced in the index.html page so the ng-
app directive and the module can be connected.
var hackApp = angular.module("hackApp", []);
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="scripts/ngHackApp.js"></script>](https://image.slidesharecdn.com/startingwithangularjs-200425074335/85/Starting-with-angular-js-5-320.jpg)
Starting with angular js
- 1. Starting with Angular JS JAGRITI SRIVASTAVA
- 2. A simple html page without angularjs <!DOCTYPE html> <html> <head> <title>Angular - Demos</title> <meta charset="utf-8" /> </head> <body> <div id="messageTitle"></div> <div id="message">Hello World</div> </body> </html> • In this case this html page shows a single view . • This is a Single Page Application, only a portion of the page represents the current view. • In this case, the contents of the body represent the view while the HTML and HEAD elements make up the container for the individual views. • To make it angular js application there are some steps to follow.
- 3. Steps for Angular JS application Reference angular js framework Define the angular js application To define angular js application there are some components to be used <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> ng-app − This directive defines and links an AngularJS application to HTML. ng-model − This directive binds the values of AngularJS application data to HTML input controls. ng-bind − This directive binds the AngularJS Application data to HTML tags.
- 4. When this script loads it will examine the page and look for directives such as the ng-view used previously. To bootstrap the application an ng-app directive is used, typically on the HTML element itself. When AngularJS loads it will see this directive which will cause it to look for a module named “hackApp.” <html ng-app="hackApp">
- 5. This single line of code defines module named “hackApp,” which will also be used to connect controllers to the application. The script needs to then be referenced in the index.html page so the ng- app directive and the module can be connected. var hackApp = angular.module("hackApp", []); <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> <script src="scripts/ngHackApp.js"></script>
- 6. Viewing the page in a browser results in a simple view, which shows the heading and the static message contained in the view. It needs a controller and model to actually make it more than just some HTML markup. The controller will be responsible for connecting the view and model and resolves other dependencies like: services to consume HTTP resources.
- 7. So the overall program with controller and view will be like this <!DOCTYPE html> <html ng-app="hackApp"> <head> <title>Hack Hands Angular - Demos</title> <meta charset="utf-8" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> <script src="scripts/ngHackApp.js"></script> </head> <body ng-controller="indexController"> <h1>Hack Hands Angular Demos</h1> <div ng-view> <div id="messageTitle"></div> <div id="message">Hello World</div> </div> </body> </html>
- 8. Here ng-controller and ng-view will be working as view and controller for angularjs MVC platform The ng-controller must be registered with the ANGULARJS application in order to be resolvable by name. One way to register the controller is to manually add it to the JavaScript variable representing the AngularJS application. var indexController = hackApp.controller("indexController", function ($scope) { // controller logic goes here } );
- 9. The $scope is the dependency of the controller called the $scope object. The $scope parameter refers to the current scope or context for the view. $scope is the model used by the view. The model for a controller contains the data to be displayed, as well as data to be collected in any input fields or forms. models may contain functions that are invoked based on user input or other activities like clicking a button or making changes to the model data.
- 10. The $scope object injected into the controller can be used as the model directly $scope can be used to declare and set a value on the model. AngularJS provides a rich declarative data binding experience. That means elements in the view can have their value bound to the model. var indexController = hackApp.controller("indexController", function ($scope) { // controller logic goes here $scope.message = "Hello Hacking World" } );
- 11. The binding in AngularJS is two-way, The value can be changed by the view (e.g. changing the value in a text box) or in the model (e.g. changing the model in a function when a button is clicked). <div ng-view> <div id="messageTitle"></div> <div id="message">Hello {{message}}!</div> <form> <input type="text" id="name" ng-model="message" /> </form> </div>
- 12. Using two way data binding <form> <input type="text" id="name" ng-model="message" /> <button ng-click="popupGreet()" value="popup">Greet</button> </form> var indexController = hackApp.controller("indexController", function ($scope, $window) { // controller logic goes here $scope.message = "Hello Hacking World"; $scope.popupGreet = function () { $window.alert("Hi there " + $scope.message); }; } );