AngularJS应用介绍
发布时间:2020-12-17 10:09:38 所属栏目:安全 来源:网络整理
导读:AngularJS应用 利用昨天的实例说明一下整个AngularJS应用,代码如下: !DOCTYPE htmlhtml ng-app="exampleApp" head titleAngularJS Demo/title link href="bootstrap.css" rel="stylesheet" / link href="bootstrap-theme.css" rel="stylesheet" / script s
AngularJS应用
利用昨天的实例说明一下整个AngularJS应用,代码如下:
<!DOCTYPE html> <html ng-app="exampleApp" > <head> <title>AngularJS Demo</title> <link href="bootstrap.css" rel="stylesheet" /> <link href="bootstrap-theme.css" rel="stylesheet" /> <script src="angular.js"></script> <script> var myApp = angular.module("exampleApp",[]); myApp.controller("dayCtrl",function ($scope) { $scope.day = new Date(); $scope.hellowolrd = "Hello Wolrd!" }); </script> </head> <body > <div class="panel" ng-controller="dayCtrl"> <div class="page-header"> <h3>AngularJS App</h3> </div> <h4>{{hellowolrd}}</h4> <h4>Today is {{day | date:"yyyy-MM-dd HH:mm:ss"}}</h4> </div> </body> </html>
加载过程
控制器myApp.controller("dayCtrl",function ($scope) { // controller statements will go here }); 通过这种方法定义控制器Controller。在里面有参数$scope,是通过angularjs的DI自动注入。控制器是视图和模型间的协调者,那么它所包含的逻辑就应该尽量少。一般,控制器是通过$scope参数,进行数据的操作。另外的一种定义控制器方式一般如下,它可以让我们明确定义依赖的组件和服务。 myApp.controller("dayCtrl",['$scope',function ($scope) { // controller statements will go here }]);
控制器在Views中的定义
声明了控制器后,可以在View中的任何地方进行定义。例如在body中定义
<body ng-controller="dayCtrl">也可以在其它元素,比如div中定义 <div class="panel" ng-controller="dayCtrl">或者是form元素 <form ng-controller="dayCtrl">……</form> 注意:在元素上定义controller,那么该controller的作用域只存在该元素中。 每个Controller中的$scope是互不相同的,并且互不干扰。 过滤器
在我们开发中经常需要在页面显示给用户的信息需要一定处理格式化,才能显示给用户。比如时间本地化,或者yyyy-MM-dd HH:mm:ss格式,数字精度格式化,本地化,人名格式化等等。
如上面的时间过滤: <h4>Today is {{day | date:"yyyy-MM-dd HH:mm:ss"}}</h4>在angularjs中为我们提供了叫filter的指令,让我们能够很轻易就能做到着一些列的功能,angularjs内部为我们提供了number等很多内置的filter。我们通过myapp.filter,进行Filter的自定义,实现Filter扩展功能。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
推荐文章
站长推荐
热点阅读