dipaktelangre/AngularJS-notes

## AngularJS-notes
/*
* Angular JS
*/

// Hello World Angular

<!DOCTYPE html>
<html ng-app>

<head>
    <title>Simple app</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js">
    </script>
</head>

<body>
    <input ng-model="name" type="text" placeholder="Your name">
    <h1>Hello {{ name }}</h1>
</body>

</html>


/*
* ng-controller --- All elemtent inside it belong to controller
* $scope  --- bind the data from View to controller
*/

<!doctype html>
<html ng-app>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs
/angularjs/1.2.0-rc.2/angular.js"></script>
    </script>
</head>

<body>
    <div ng-controller="MyController">
        <h1>Hello {{ clock }}!</h1>
    </div>
    <script type="text/javascript">
        function MyController($scope) {
            $scope.clock = new Date();
            var updateClock = function() {
                $scope.clock = new Date();
            };
            setInterval(function() {
                $scope.$apply(updateClock);
            }, 1000);
            updateClock();
        };
    </script>
</body>

</html>

/* --------------------------------------
*   Best Data Binding Practices in Angular
*   Bind attribute on an object, rather than the raw object itself
*   Instead of containing all of our code in the index.html file, it’s usually a good idea to include JavaScript in a separate file.
*   app.js
*/

/* ------------------------ Modules ------------------
*   Global namespace can cause collision and tough to debug
*   Module : main way to define the AngularJS app.
*   App can have many module
*   1) • Keeping our global namespace clean
*   2)  • Making tests easier to write and keeping them clean so as to more easily target isolated functionality
*   3)  • Making it easy to share code between applications
*   4)  • Allowing our app to load different parts of the code in any order
*/
   angular.module('myApp', []);

/* -------------------------- Scope -----------------
* The $scope object is where we define the business functinality of the application, the methods in our controllers, and properties in the views
* Glue between the controller and the view.
* $rootScope --- > parrent of all $scope
*/

/* ---------------------------- Controller ----------------
* The controller in AngularJS is a function that adds additional functionality to the scope of the view.
* Since Angular takes care of handling the controller for us, we only need to write the constructor function
*/
    function FirstController($scope) {
        $scope.message = "hello";
    }
/* Dont dirty global scope
*  Create module and then create controller ontop of module
*/
    var app = angular.module('app', []);
    app.controller('FirstController', function($scope) {
        $scope.message = "hello";
    });
	/*
	* Angular JS
	*/

	// Hello World Angular

	<!DOCTYPE html>
	<html ng-app>

	<head>
	<title>Simple app</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js">
	</script>
	</head>

	<body>
	<input ng-model="name" type="text" placeholder="Your name">
	<h1>Hello {{ name }}</h1>
	</body>

	</html>


	/*
	* ng-controller --- All elemtent inside it belong to controller
	* $scope --- bind the data from View to controller
	*/

	<!doctype html>
	<html ng-app>

	<head>
	<script src="https://ajax.googleapis.com/ajax/libs
	/angularjs/1.2.0-rc.2/angular.js"></script>
	</script>
	</head>

	<body>
	<div ng-controller="MyController">
	<h1>Hello {{ clock }}!</h1>
	</div>
	<script type="text/javascript">
	function MyController($scope) {
	$scope.clock = new Date();
	var updateClock = function() {
	$scope.clock = new Date();
	};
	setInterval(function() {
	$scope.$apply(updateClock);
	}, 1000);
	updateClock();
	};
	</script>
	</body>

	</html>

	/* --------------------------------------
	* Best Data Binding Practices in Angular
	* Bind attribute on an object, rather than the raw object itself
	* Instead of containing all of our code in the index.html file, it’s usually a good idea to include JavaScript in a separate file.
	* app.js
	*/

	/* ------------------------ Modules ------------------
	* Global namespace can cause collision and tough to debug
	* Module : main way to define the AngularJS app.
	* App can have many module
	* 1) • Keeping our global namespace clean
	* 2) • Making tests easier to write and keeping them clean so as to more easily target isolated functionality
	* 3) • Making it easy to share code between applications
	* 4) • Allowing our app to load different parts of the code in any order
	*/
	angular.module('myApp', []);

	/* -------------------------- Scope -----------------
	* The $scope object is where we define the business functinality of the application, the methods in our controllers, and properties in the views
	* Glue between the controller and the view.
	* $rootScope --- > parrent of all $scope
	*/

	/* ---------------------------- Controller ----------------
	* The controller in AngularJS is a function that adds additional functionality to the scope of the view.
	* Since Angular takes care of handling the controller for us, we only need to write the constructor function
	*/
	function FirstController($scope) {
	$scope.message = "hello";
	}
	/* Dont dirty global scope
	* Create module and then create controller ontop of module
	*/
	var app = angular.module('app', []);
	app.controller('FirstController', function($scope) {
	$scope.message = "hello";
	});
No results found