Angularjs基础(九)

AngularJS 应用 应用程序讲解     实例:

		        <html ng-app="myNoteApp">
		          <head>
			            <meat charset="utf-8">
            <script src="http://apps.bdimg.com/libs/angular.js/1.4.6angular.min.js"></script>
		          </head>
		          <body>
			            <div ng-controller="myNoteCtrl">
				            <h2>我的笔记</h2>
				            <p><textarea ng-model="message" cols="40"rows="10"></textarea></p>
				            <p>
					              <button ng-click="sace()">保存</button>
					              <button ng-click="clear()">清除</button>
				            </p>
				            <p>Number of characters left:<span ng-bind="left()"></span></p>
			            </div>
			            <script src="myNoteApp.js"></script>
			            <script src="myNoteCtrl.js"></script>
		          </body>
		        </html>

      应用程序文件“myNoteCtrl.js”:

		          var app = angular.module("myNoteApp",[]);

      控制器文件“myNoteCtrl.js”

		          app.controller("myNoteCtrl",function($scope){
			                $scope.message = "";
			                $scope.left = function (){ return 100 - $scope.message.length;};
			                $scope.clear = function() {$scope.message = "";};
			                $scope.save = function(){alert("Note Saved")}
		          })

      <html> 元素是AngularJS应用:ng-app="myNoteApp"的容器:

		         <html ng-app="myNoteApp">

      <div>是HTML 页面中控制器:ng-controller = "myNoteCtrl"的作用域

		        <div ng-controller="myNoteCtrl">

        ng-model 指令绑定了<textarea>到控制器变量message:

		        <textarea ng-model="message" cols="40" rows="10"></textarea>

      两个ng-click 事件调用了控制器函数clear()和save();

		          <button ng-click="save()"></button>
		          <button ng-click="clear()"></button>

      ng-bind 指令绑定控制器函数 left() 到<span> ,用于显示剩余字符:

		          Number of characters left: <span ng-bind="left()"></span>

      应用库文件需要在 AngularJs 加载后才能执行:

		          <script src="myNoteApp.js"></script>
		          <script src="myNoteCtrl.js"></script>

AngularJS 应用架构     以上实例是一个完整的 AngularJS 单页Web应用(single page web application,SPA)。     <html> 元素包含了 AngularJS 应用 (ng-app=)。     <div> 元素定义了 AngularJS 控制器的作用域 (ng-controller=)。     在一个应用可以由很多控制器。

常用指令

ng-app 定义应用程序的根元素。       实例:让body 元素为AngularJS 应用的根元素:

			          <body ng-app="">
				            <p>我的第一个表达式:{{5+5}}</p>
			          </body>

      定义和用法           ng-app 指令用于告诉AngularJS应用和这个元素是根元素。           所有AngularJS 应用都必须要要一个跟元素。           HTML文档中只允许有一个ng-app 指令,如果有多个ng-app指令,则只第一个会被使用。           <element ng-app="modulename">               在 ng-app 根元素上的内容可以包含 AngularJS 代码           </element>       参数值           值: modulename 描述: 可选。指定载应用模块的名称。       实例:

					        <div ng-app="myApp" ng-controller="myCtrl">
						            {{firstName +""+ lastName}}
					        </div>
					        <script>
						          var app = angular.module("myApp",[]);
						          app.controller("myCtrl",function($scope){
							                $scope.firstName ="John";
							                $scope.lastName ="Doe";
						          })
					      </sctipt>

ng-bind 描述:绑定HTML元素到应用程序数据。       实例:绑定<p>内的innerHTML 到变量myTwxt

		        <div ng-app="" ng-init="myText='Hello Word!'">
			            <p ng-bind="myText"></p>
		        </div>

      定义和用法           ng-bind 指令告诉AngularJS 使用给定的变量或表达式的值来替换HTML元素的内容。           如果给定的变量或表达式修改,指定替换的HTML元素也会修改。       语法:

			          <element ng-bind="expression"></element>

            或作为CSS 类:

			          <element class ="ng-bind:ex[ression"></element>

      参数值           值:expression 描述: 指定要执行的变量或表达式。

ng-bind-html 描述:绑定HTML元素的innerHTML 到应用的程序数据,并移除html 字符串中危险字符。             实例:绑定<p>内的innerHTML变量到myText

		                <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
		                <script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular-sanitize.min.js"></script>
		                <body>
			                    <div ng-app="myApp" ng-controller="myCtrl">
				                      <p ng-bind-html="myTwxt"></p>
			                    </div>
		                </body>
		                <script>
			                    var app=angular.module("myApp",['ngSanitize']);
			                        app.controller("myCtrl",function($scope){
				                        $scope.myText = "My name is: <h1>John Doe</h1>";
			                    })
		              </script>

            定义和用法                 ng-bind-html 指令是通过一个安全的方式将内容绑定到HTML元素上。                 语法:<element ng-bind-html="expression"></element>             参数值             值:expression 描述:指定要执行的变量或表达式。

ng-bind-template 描述:规定要使用模板替换的文本内容。             实例:<p元素上绑定两个表达式>

			              <div ng-app="myApp" ng-bind-template="{{firstName}} {{lastName}}" ng-controller="myCtrl"></div>
			              <script>
				                var app = angular.module("myApp",[]);
				                app.controller("myCtrl",function($scope){
					                      $scope.firstName = "John";
					                        $scope.lastName ="Doe";
				                    })
			              </script>

            定义和用法                 ng-bind-template 指令用于告诉AngularJS 将绑定表达式的值替换HTML元素的内容。                 当你想在HTML元素上绑定多个表达式时可以是使用 ng-bind-template指令。                 语法: <element ng-bind-template="expression"></element>                 参数值: 值:expression 描述: 一个或多个要执行的表达式,每个使用{{}}包含。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏JackieZheng

AngularJS in Action读书笔记3——走近Services

  试着想想这些问题:如果一个controller只关心自己所控制的view页面,那么对于整个application来说,你如何调用想要的function;如果...

22690
来自专栏JackieZheng

AngularJS入门心得1——directive和controller如何通信

  粗略地翻了一遍《JavaScript DOM编程艺术》,就以为可以接过AngularJS的一招半式,一个星期过去了,我发现自己还是Too Young,Too...

25060
来自专栏JackieZheng

AngularJS in Action读书笔记1——扫平一揽子专业术语

前(fei)言(hua):   数月前,以一个盲人摸象的姿态看了一些关于AngularJS的视频书籍,留下了我个人的一点或许是指点迷津或许是误人子弟的读后感。自...

21070
来自专栏liulun

模仿angularjs写了一个简单的HTML模版和js数据填充的示例

<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> ...

22260
来自专栏JackieZheng

AngularJS入门心得3——HTML的左右手指令

  在《AngularJS入门心得1——directive和controller如何通信》我们提到“AngularJS是为了克服HTML在构建应用上的不足而设计...

22050
来自专栏JackieZheng

AngularJS in Action读书笔记2——view和controller的那些事儿

今天我们来818《angularjs in action》的第三章controller和view。 1.Big Picture概览图 ? image.png...

248100
来自专栏JackieZheng

AngularJS in Action读书笔记6(实战篇)——bug hunting

  这一系列文章感觉写的不好,思维跨度很大,原本是由于与《Angularjs in action》有种相见恨晚而激发要写点读后感之类的文章,但是在翻译或是阐述的...

222100
来自专栏JackieZheng

AngularJS入门心得2——何为双向数据绑定

  前言:谁说Test工作比较轻松,最近在熟悉几个case,差点没疯。最近又是断断续续的看我的AngularJS,总觉得自己还是没有入门,可能是自己欠前端的东西...

22480
来自专栏JackieZheng

AngularJS in Action读书笔记4(实战篇)——创建Statistic模块

  个人感觉《Angularjs in action》这本书写的很好,很流畅,循序渐进,深入浅出,关键是结合了一个托管于Github上的实例讲解的,有代码可查,...

20970
来自专栏JackieZheng

AngularJS in Action读书笔记5(实战篇)——在directive中引入D3饼状图显示

前言:   "宁肯像种子一样等待    也不愿像疲惫的陀螺    旋转得那样勉强"   这是前几天在查资料无意间看到的一位园友的签名,看完后又读了两遍,觉得很有...

30660

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励