WEBAPP开发心得之02 ionic+angular开发webapp笔记-职坐标

WEBAPP开发心得之02 ionic+angular开发webapp笔记

白羽 2018-09-05 来源：网络阅读 1990 评论 0

摘要：本文将带你了解WEBAPP开发心得之02 ionic+angular开发webapp笔记，希望本文对大家学webapp有所帮助。

本文将带你了解WEBAPP开发心得之02 ionic+angular开发webapp笔记，希望本文对大家学webapp有所帮助。

Angular js 的特性：
MVC
模块化和依赖注入
双向数据绑定
指令和ui控件
MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。
在angular中，模型是指scope中的变量，视图是html代码模板，控制器就是angular的controller。

<!doctype html><html lang="en" ng-app="mymodule"><head> <meta charset="UTF-8" /> <title>Document</title> <script src="//cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> </head><body> <div> <div ng-controller="firstController"> 此处显示的是双向数据绑定的名字：{{name}}<br> 此处显示的根作用域里面的变量age：{{age}}<br> 此处使用的ng-bind指定绑定的变量：<span ng-bind="name"></span><br> 此处可以修改测试双向数据绑定：<input type="text" name="" id="" value="" ng-model="name" /><br> </div> <div ng-controller="secondController"> {{name}}<br> {{age}}<br> </div> 这里是自定义的一个指令：<br> 元素形式：<aaa></aaa> 属性形式：<div aaa></div> 类名字形式：<div class="aaa"></div> 注释形式： </div> <script type="text/javascript"> var mymodule = angular.module("mymodule",[]); mymodule.controller("firstController",["$scope","$rootScope",function(a,b){ a.name="zhangsan"; b.age = "666"; }]); mymodule.controller("secondController",function($scope,$rootScope){ $scope.name = "李四"; }); mymodule.directive("aaa",function(){ return { restrict : "EACM",//E 作为元素名使用 A 作为属性使用 C 作为类名使用 M 作为注释使用 replace:true,//这个在注释使用的时候必须加上才管用 template : "<h1>这是我自定义的指令</h1>" }; }); </script></body></html>

上面的这个例子中，元素标签中的ng开头的属性就是angular的指令，在input中输入内容，别的地方也绑定此变量的值也跟着变动，这就是angular的特色，双向绑定。ng-app一般页面中只会出现一个，用于划分angular操作dom的区域，也是$rootScope变量所能修改的区域，里面包含两个controller，两种引入的方式都正确，第一种是为了压缩代码所写的一种方式。但是，这种变量名字不能写错，否则angular找不到区域位置，无法处理。
angular将很多在特殊环境使用的内容都进行的模块化，就是在需要的时候可以引入，不需要的话就不引入，需要的使用用module方法依赖注入即可。

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之webapp频道！

移动端app开发手机应用程序开发移动端开发js

本文由 @白羽发布于职坐标。未经许可，禁止转载。