Downloaded 13 times
![MVVM - Controller & Model
(function (ng) {
// Defining Module
var mvvmTest = ng.module("mvvmTest", []);
// Defining Controllers
mvvmTest.controller("UserController", function () {
// defining Model
var userController = this;
userController.user = {
name: "Amit Thakkar",
age: 26
};
});
})(angular);](https://image.slidesharecdn.com/adifferentthought-angularjspart-2-150519085230-lva1-app6892/85/A-different-thought-angular-js-part-2-11-320.jpg)
![MVVM - Controller & Model
(function (ng) {
// Defining Module
var mvvmTest = ng.module("mvvmTest", []);
// Defining Controllers
mvvmTest.controller("UserController", function () {
// defining Model
var userController = this;
userController.user = {
name: "Amit Thakkar",
age: 26
};
});
})(angular);](https://image.slidesharecdn.com/adifferentthought-angularjspart-2-150519085230-lva1-app6892/85/A-different-thought-angular-js-part-2-12-320.jpg)
![MVVM - Controller & Model
(function (ng) {
// Defining Module
var mvvmTest = ng.module("mvvmTest", []);
// Defining Controllers
mvvmTest.controller("UserController", function () {
// defining Model
var userController = this;
userController.user = {
name: "Amit Thakkar",
age: 26
};
});
})(angular);](https://image.slidesharecdn.com/adifferentthought-angularjspart-2-150519085230-lva1-app6892/85/A-different-thought-angular-js-part-2-13-320.jpg)
![MVVM - Controller & Model
(function (ng) {
// Defining Module
var mvvmTest = ng.module("mvvmTest", []);
// Defining Controllers
mvvmTest.controller("UserController", function () {
// defining Model
var userController = this;
userController.user = {
name: "Amit Thakkar",
age: 26
};
});
})(angular);](https://image.slidesharecdn.com/adifferentthought-angularjspart-2-150519085230-lva1-app6892/85/A-different-thought-angular-js-part-2-14-320.jpg)
![MVVM - Controller & Model
(function (ng) {
// Defining Module
var mvvmTest = ng.module("mvvmTest", []);
// Defining Controllers
mvvmTest.controller("UserController", function () {
// defining Model
var userController = this;
userController.user = {
name: "Amit Thakkar",
age: 26
};
});
})(angular);](https://image.slidesharecdn.com/adifferentthought-angularjspart-2-150519085230-lva1-app6892/75/A-different-thought-angular-js-part-2-11-2048.jpg)
![MVVM - Controller & Model
(function (ng) {
// Defining Module
var mvvmTest = ng.module("mvvmTest", []);
// Defining Controllers
mvvmTest.controller("UserController", function () {
// defining Model
var userController = this;
userController.user = {
name: "Amit Thakkar",
age: 26
};
});
})(angular);](https://image.slidesharecdn.com/adifferentthought-angularjspart-2-150519085230-lva1-app6892/75/A-different-thought-angular-js-part-2-12-2048.jpg)
![MVVM - Controller & Model
(function (ng) {
// Defining Module
var mvvmTest = ng.module("mvvmTest", []);
// Defining Controllers
mvvmTest.controller("UserController", function () {
// defining Model
var userController = this;
userController.user = {
name: "Amit Thakkar",
age: 26
};
});
})(angular);](https://image.slidesharecdn.com/adifferentthought-angularjspart-2-150519085230-lva1-app6892/75/A-different-thought-angular-js-part-2-13-2048.jpg)
![MVVM - Controller & Model
(function (ng) {
// Defining Module
var mvvmTest = ng.module("mvvmTest", []);
// Defining Controllers
mvvmTest.controller("UserController", function () {
// defining Model
var userController = this;
userController.user = {
name: "Amit Thakkar",
age: 26
};
});
})(angular);](https://image.slidesharecdn.com/adifferentthought-angularjspart-2-150519085230-lva1-app6892/75/A-different-thought-angular-js-part-2-14-2048.jpg)
Uploaded byAmit Thakkar
A different thought angular js part-2
This document discusses AngularJS directives and the model-view-view-model (MVVM) pattern. It begins with an agenda that includes MVVM, directives like ng-show/ng-hide, ng-click, and ng-repeat. It then provides an example of using controllers and models with MVVM in AngularJS. Directives are explained and examples are given for ng-show/ng-hide, ng-click, and ng-repeat. Finally, it references a TODO app demo and asks if there are any questions.
More Related Content
Similar to A different thought angular js part-2
A different thought angular js part-2
- 1.
- 2.
- 3.
- 4.
- 5. Agenda 1. MVVM 2. Directive a.ng-show/ng-hide
- 6. Agenda 1. MVVM 2. Directive a.ng-show/ng-hide b. ng-click
- 7. Agenda 1. MVVM 2. Directive a.ng-show/ng-hide b. ng-click c. ng-repeat
- 8. Agenda 1. MVVM 2. Directive a.ng-show/ng-hide b. ng-click c. ng-repeat 3. To Do App
- 9. About Me Amit Thakkar TechBlogger @ CodeChutney.in JavaScript Lover Working on MEAN Stack Twitter: @amit_thakkar01 LinkedIn: linkedin.com/in/amitthakkar01 Facebook: facebook.com/amit.thakkar01
- 10.
- 11. MVVM - Controller& Model (function (ng) { // Defining Module var mvvmTest = ng.module("mvvmTest", []); // Defining Controllers mvvmTest.controller("UserController", function () { // defining Model var userController = this; userController.user = { name: "Amit Thakkar", age: 26 }; }); })(angular);
- 12. MVVM - Controller& Model (function (ng) { // Defining Module var mvvmTest = ng.module("mvvmTest", []); // Defining Controllers mvvmTest.controller("UserController", function () { // defining Model var userController = this; userController.user = { name: "Amit Thakkar", age: 26 }; }); })(angular);
- 13. MVVM - Controller& Model (function (ng) { // Defining Module var mvvmTest = ng.module("mvvmTest", []); // Defining Controllers mvvmTest.controller("UserController", function () { // defining Model var userController = this; userController.user = { name: "Amit Thakkar", age: 26 }; }); })(angular);
- 14. MVVM - Controller& Model (function (ng) { // Defining Module var mvvmTest = ng.module("mvvmTest", []); // Defining Controllers mvvmTest.controller("UserController", function () { // defining Model var userController = this; userController.user = { name: "Amit Thakkar", age: 26 }; }); })(angular);
- 15. MVVM - View <!--Using module --> <html ng-app="mvvmTest"> <head lang="en"> <title>AngularJS MVVM</title> </head> <body> <!-- Defining View --> <div ng-controller="UserController as userController"> <h3>User Details:</h3> Name: {{ userController.user.name }} <br/> Age: {{ userController.user.age }} <br/> </div> </body> </html>
- 16. MVVM - View <!--Using module --> <html ng-app="mvvmTest"> <head lang="en"> <title>AngularJS MVVM</title> </head> <body> <!-- Defining View --> <div ng-controller="UserController as userController"> <h3>User Details:</h3> Name: {{ userController.user.name }} <br/> Age: {{ userController.user.age }} <br/> </div> </body> </html>
- 17. MVVM - View <!--Using module --> <html ng-app="mvvmTest"> <head lang="en"> <title>AngularJS MVVM</title> </head> <body> <!-- Defining View --> <div ng-controller="UserController as userController"> <h3>User Details:</h3> Name: {{ userController.user.name }} <br/> Age: {{ userController.user.age }} <br/> </div> </body> </html>
- 18. MVVM - View <!--Using module --> <html ng-app="mvvmTest"> <head lang="en"> <title>AngularJS MVVM</title> </head> <body> <!-- Defining View --> <div ng-controller="UserController as userController"> <h3>User Details:</h3> Name: {{ userController.user.name }} <br/> Age: {{ userController.user.age }} <br/> </div> </body> </html>
- 19. You can checkoutDemo form: https://github.com/AmitThakkar/A-Different-Thought-AngualarJS
- 20. What is Directive? Directiveis a marker on DOM element, which tells AngularJS to bind a specified behavior to the DOM element and its children element.
- 21. What is Directive?ng-show/ng-hide <h4ng-show="todo.tasks.length">TODO List:</h4> <h4 ng-hide="!todo.tasks.length">TODO List:</h4> <h4 ng-show="todo.tasks.length > 0">TODO List:</h4> <h4 ng-hide="todo.tasks.length < 1">TODO List:</h4>
- 22. What is Directive?ng-click <inputtype="button" value="Remove" ng-click="todo.removeTask($index)">
- 23. What is Directive?ng-repeat <ul> <ling-repeat="task in todo.tasks"> {{task}} </li> </ul>
- 24. TODO App ? Youcan checkout Demo form: https://github.com/AmitThakkar/A-Different-Thought-AngualarJS
- 25.
- 26. References: MVC and MVVMwith AngularJS