AngularJS GetStarted

Posted by On 8月 22, 2015 0 Comment

AngularJS

AngularJS is JavaScript library which is to extend HTML created by Google.
This is just javascript source file and easy to use

Main Features are following:

  • Template Engine
  • Directive
  • Dual Direction Data binding
  • Controller and Scope
  • DI Dependency Injection Container

Get Started

This is a first example for it.

<!DOCTYPE html>
<html ng-app>
<head>
	<meta charset="UTF-8">
	<title>ng-bind Test</title>
	<script src="angular.min.js"></script>
</head>
<body>
	<input type="text" ng-model="myName">
	<p ng-bind="myName"></p>

	<div>
		Test: {{myName}}
	</div>
</body>
</html>

This is bind test sample. input text in text box and show text in p tag and div tag after test.
Is it simple?

Sanitize

<!DOCTYPE html>
<html ng-app="myModule">
  <head>
     <meta charset="UTF-8">
     <title>ng-bind sanitize</title>
     <script src="angular.min.js"></script>
     <script src="angular-sanitize.min.js"></script>
  </head>
  <body>
  	<input type="text" ng-model="myName">
  	<p ng-bind-html="myName"></p>

  	<script>
  	angular.module('myModule', ['ngSanitize']);
  	</script>

  </body>
</html>

ng-app

Decide AngularJS range.
If you want to set module name ng-app=”module name”
html or body

<html ng-app>
</html>

<body>
    <div ng-app>
        <input type="text" ng-model="test"/>
    </div>
    <p>Out of range<p>
</body>

TOPICS