a different thought angular js part-2
TRANSCRIPT
A Different ThoughtAngularJS Part-2
Agenda
Agenda
1. MVVM
Agenda
1. MVVM2. Directive
Agenda
1. MVVM2. Directive
a. ng-show/ng-hide
Agenda
1. MVVM2. Directive
a. ng-show/ng-hideb. ng-click
Agenda
1. MVVM2. Directive
a. ng-show/ng-hideb. ng-clickc. ng-repeat
Agenda
1. MVVM2. Directive
a. ng-show/ng-hideb. ng-clickc. ng-repeat
3. To Do App
About Me
Amit ThakkarTech Blogger @ CodeChutney.inJavaScript LoverWorking on MEAN Stack
Twitter: @amit_thakkar01LinkedIn: linkedin.com/in/amitthakkar01Facebook: facebook.com/amit.thakkar01
MVVM
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);
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);
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);
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);
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>
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>
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>
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>
You can checkout Demo form: https://github.com/AmitThakkar/A-Different-Thought-AngualarJS
What is Directive?
Directive is a marker on DOM element, which tells AngularJS to bind a specified behavior to the DOM element and its children element.
What is Directive? ng-show/ng-hide
<h4 ng-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>
What is Directive? ng-click
<input type="button" value="Remove" ng-click="todo.removeTask($index)">
What is Directive? ng-repeat
<ul> <li ng-repeat="task in todo.tasks"> {{task}} </li></ul>
TODO App ?
You can checkout Demo form: https://github.com/AmitThakkar/A-Different-Thought-AngualarJS
Questions??
References:MVC and MVVM with AngularJS