![KARTHIKEYAN P
app.js
//IIFE
(function(){
'use strict';
angular.module('myFirstApp',[ ])
.controller('MyFirstController', function() {
});
})();](https://image.slidesharecdn.com/session3-webtools-angularjs-200826103535/85/Web-tools-angular-js-5-320.jpg)
![KARTHIKEYAN P
app.js
(function(){
'use strict';
angular.module('myFirstApp',[])
.controller('MyFirstController', function($scope) {
$scope.name = “karthik”
$scope.sayHello = function() { return “Hai”;}
});
})();](https://image.slidesharecdn.com/session3-webtools-angularjs-200826103535/85/Web-tools-angular-js-7-320.jpg)
Web tools - angular js
- 1. KARTHIKEYAN P Web Development Tools Session 3
- 2. KARTHIKEYAN P Session Outcomes At the end of this session, students will be able to, 1. Install and use angular js 2. Run a simple app using angular js
- 3. KARTHIKEYAN P Angular JS • Download Angular JS – (https://angularjs.org) – Use angular.min.js
- 4. KARTHIKEYAN P Angular JS • Files – index.html, app.js, angular.min.js – style.css (optional) • Wrapping your AngularJS components in an Immediately Invoked Function Expression (IIFE). This helps to prevent variables and function declarations from living longer than expected in the global scope, which also helps avoid variable collisions. https://codestyle.co/guidelines/angularjs/
- 5. KARTHIKEYAN P app.js //IIFE (function(){ 'use strict'; angular.module('myFirstApp',[ ]) .controller('MyFirstController', function() { }); })();
- 6. KARTHIKEYAN P Update index.html • Add angualar app <html ng-app=“myFirstApp”> • Add angular controller <div ng-controller=“myFirstController”>
- 7. KARTHIKEYAN P app.js (function(){ 'use strict'; angular.module('myFirstApp',[]) .controller('MyFirstController', function($scope) { $scope.name = “karthik” $scope.sayHello = function() { return “Hai”;} }); })();
- 8. KARTHIKEYAN P Sharing data - controller • Add angular controller <div ng-controller=“myFirstController”> {{name}} {{sayHello()}} </div>
- 9. KARTHIKEYAN P Sharing data - controller • Add angular controller <div ng-controller=“myFirstController”> <input type="text" ng-model="name"> Inside input box is: {{name}} </div>