angularjs笔记(三)

7、其他一些常用指令，布尔类型的指令也可以用表达式

　　（1）、数组索引$index

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<div ng-app="myApp" ng-controller="myController">

   <p ng-repeat="x in names">{{$index+1}}_{{x}}</p>

</div>

<script>

    angular.module('myApp', []).controller('myController', function ($scope) {

        $scope.names=['Tom','Lily','John'];

    });

</script>

</body>

</html>

$index指令

　　（2）、ng-disabled对应HTML元素disable属性

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <title></title>

    <meta charset="utf-8">

    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<div ng-app="">

    <!--ng-model绑定的是checkbox的value值

           ng-disabled对应button的disabled属性

           -->

    <input type="checkbox" ng-model="mySwitch"/>

    <button ng-disabled="mySwitch">按钮</button>

</div>

</body>

</html>

ng-disabled

　　（3）、ng-show、ng-hide指令

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <title></title>

    <meta charset="utf-8">

    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<div ng-app="">

    <input type="checkbox" ng-model="mySwitch"/>

    <button ng-show="mySwitch">按钮1</button>

    <button ng-hide="mySwitch">按钮2</button>

    <input type="text" ng-model="hour"/>

    <button ng-hide="hour>10">按钮3</button>

</div>

</body>

</html>

ng-show、ng-hide

　　(4)、ng-click

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <title></title>

    <meta charset="utf-8">

    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<div ng-app="myApp" ng-controller="myController">

    <button ng-click="count=count+1">{{count}}</button>

    <input type="button" ng-click="toggle()" value="toggle"/>

    <div ng-show="switch" style="height: 20px;width: 20px;background-color: beige;border: 1px solid gray">

    </div>

</div>

<script type="text/javascript">

    angular.module('myApp', []).controller('myController', function ($scope) {

        $scope.count = 0;

        $scope.switch = true;

        $scope.toggle = function () {

            $scope.switch = !$scope.switch;

        };

    });

</script>

</body>

</html>

ng-click

　（5）、ng-include

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <title></title>

    <meta charset="utf-8">

    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<div ng-app="myApp4" ng-controller="myController4">

  <div ng-include="'/test/angularjsInclude.html'">

</div>

</div>

<script type="text/javascript">

angular.module('myApp4',[]).controller('myController4',function(){

});

</script>

</body>

</html>

ng-include

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <title></title>

</head>

<body>

AngularJSInclude

</body>

</html>

/test/angularjsInclude.html页面

8、AngularJS依赖注入，value、factory、service、provider、constant五个核心组件作为依赖注入

　　（1）、value

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <title></title>

    <meta charset="utf-8">

    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<div ng-app="myApp" ng-controller="myController">

    <input type="text" ng-model="initVal"/>

</div>

<script type="text/javascript">

    var myApp=angular.module('myApp',[]);

    myApp.value('initVal',5);

    myApp.controller('myController',function($scope,initVal){

        $scope.initVal=initVal;

    });

</script>

</body>

</html>

依赖注入value

　　（2）、factory

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <title></title>

    <meta charset="utf-8">

    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<div ng-app="myApp" ng-controller="myController">

    initVal1:<input type="text" ng-model="initVal1"/>

    <br/>

    initVal2:<input type="text" ng-model="initVal2"/>

</div>

<script type="text/javascript">

    var myApp = angular.module('myApp', []);

    myApp.value('initVal', 5);

    myApp.factory('myFactory', function (initVal) {

        var factory = {};

        factory.multiply1 = function () {

            return initVal * initVal;

        };

        factory.multiply2=function(a,b){

            return a*b;

        };

        return factory;

    });

    myApp.controller('myController', function ($scope, myFactory) {

        $scope.initVal1 = myFactory.multiply1();

        $scope.initVal2=myFactory.multiply2(2,3);

    });

</script>

</body>

</html>

依赖注入factory

　　（3）、service

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <title></title>

    <meta charset="utf-8">

    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<div ng-app="myApp" ng-controller="myController">

    initVal1:<input type="text" ng-model="initVal"/>

</div>

<script type="text/javascript">

    var myApp = angular.module('myApp', []);

    myApp.value('initVal', 5);

    myApp.factory('myFactory', function (initVal) {

        var factory = {};

        factory.multiply1 = function () {

            return initVal * initVal;

        };

        factory.multiply2 = function (a, b) {

            return a * b;

        };

        return factory;

    });

    myApp.service('myService', function (initVal, myFactory) {

        this.squre = function (a) {

            return myFactory.multiply2(a, a);

        };

    });

    myApp.controller('myController', function ($scope, myService) {

        console.log(myService);

        $scope.initVal = myService.squre(3);

    });

</script>

</body>

</html>

依赖注入service

　　（4）、provider

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <title></title>

    <meta charset="utf-8">

    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<div ng-app="myApp" ng-controller="myController">

    initVal1:<input type="text" ng-model="initVal"/>

</div>

<script type="text/javascript">

    var myApp = angular.module('myApp', []);

    myApp.config(function ($provide) {

        $provide.provider('MyProvideService', function () {

            this.$get = function () {

                var factory = {};

                factory.multiply = function (a, b) {

                    return a * b;

                };

                return factory;

            };

        });

    });

    myApp.controller('myController', function ($scope, MyProvideService) {

        console.log(MyProvideService);

        $scope.initVal = MyProvideService.multiply(2,3);

    });

</script>

</body>

</html>

依赖注入provide

　　（5）、constant常量

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <title></title>

    <meta charset="utf-8">

    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<div ng-app="myApp" ng-controller="myController">

    initVal1:<input type="text" ng-model="initVal"/>

</div>

<script type="text/javascript">

    var myApp = angular.module('myApp', []);

    myApp.constant('myConstant', 23);

    myApp.controller('myController', function ($scope, myConstant) {

        $scope.initVal = myConstant;

    });

</script>

</body>

</html>

依赖注入constant

9、AngularJS 路由

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <title></title>

    <meta charset="utf-8">

    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

    <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>

</head>

<body>

<div ng-app="myApp">

    <ul>

        <li><a href="#/">首页</a></li>

        <li><a href="#/computers">电脑</a></li>

        <li><a href="#/printers">打印机</a></li>

        <li><a href="#/others">其他</a></li>

    </ul>

    <div ng-view></div>

</div>

<script type="text/javascript">

    var myApp=angular.module('myApp',['ngRoute']);

    myApp.config(['$routeProvider',function($routeProvider){

        $routeProvider.when('/',{template:'这是首页'})

                .when('/computers',{template:'电脑页面'})

                .when('/printers',{template:'打印机页面'})

                .otherwise({redirectTo:'/'});

    }]);

</script>

</body>

</html>

路由简单例子

依赖angular-route.js脚本

初始化应用程序时，要导入ngRoute模块

AngularJS路由URL是通过#+标记实现的，在向服务端发送请求地址时，#符号后面的内容会被浏览器忽略掉

在HTML中#符号是超链接的锚点，如<a href="#top">置顶</a>，表示跳转到当前页面id或name为top的元素位置处，如果在浏览器地址栏中添加跳转到另一页面的锚点，那么另一页面元素要用id来指定锚点名称，如http：//192.168.0.137：8080/anotherPage.html#bottom，会跳转到anotherPage.html页面id为bottom处。注意如果想传参数，要在#符号前传入

路由到的地址内容显示在ng-view指令标记的元素内

$routeProvider的两个函数（1）、when有两个参数，第一个是URL正则规则，第二个是路由配置对象（2）、otherwise有一个参数，是路由配置对象

路由设置对象：

$routeProvider.when(url, {

    template: string,

    templateUrl: string,

    controller: string, function 或 array,

    controllerAs: string,

    redirectTo: string, function,

    resolve: object<key, function>

});

template：ng-view内插入简单HTML内容

templateUrl：ng-view内插入HTML模板，如'/test/content.html'，会从服务端获取到文件内容插入到ng-view内

controller：在当前模板上执行controller函数，生成新的$scope

controllerAs：为controller指定别名

redirectTo：重新定向到指定地址

resolve：指定当前controller所依赖的其他模块

angularjs笔记(三)的更多相关文章

Mastering Web Application Development with AngularJS 读书笔记(三)
第一章笔记 (三) 一.Factories factory 方法是创建对象的另一种方式,与service相比更灵活,因为可以注册可任何任意对象创造功能.例如: myMod.factory('notif ...
angular学习笔记(三十一)-$location(2)
之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...
Oracle学习笔记三 SQL命令
SQL简介 SQL 支持下列类别的命令: 1.数据定义语言(DDL) 2.数据操纵语言(DML) 3.事务控制语言(TCL) 4.数据控制语言(DCL)
《CMake实践》笔记三：构建静态库(.a) 与动态库(.so) 及如何使用外部共享库和头文件
<CMake实践>笔记一:PROJECT/MESSAGE/ADD_EXECUTABLE <CMake实践>笔记二:INSTALL/CMAKE_INSTALL_PREFIX &l ...
Python 学习笔记三
笔记三:函数笔记二已取消置顶链接地址:http://www.cnblogs.com/dzzy/p/5289186.html 函数的作用: 給代码段命名,就像变量給数字命名一样可以接收参数,像arg ...
《MFC游戏开发》笔记三游戏贴图与透明特效的实现
本系列文章由七十一雾央编写,转载请注明出处. 313239 作者:七十一雾央新浪微博:http://weibo.com/1689160943/profile?rightmod=1&wvr=5 ...
[Firefly引擎][学习笔记三][已完结]所需模块封装
原地址:http://www.9miao.com/question-15-54671.html 学习笔记一传送门学习笔记二传送门学习笔记三导读: 笔记三主要就是各个模块的封装了,这里贴 ...
JSP学习笔记(三):简单的Tomcat Web服务器
注意:每次对Tomcat配置文件进行修改后,必须重启Tomcat 在E盘的DATA文件夹中创建TomcatDemo文件夹,并将Tomcat安装路径下的webapps/ROOT中的WEB-INF文件夹复 ...
构建高性能WEB站点笔记三
构建高性能WEB站点笔记三第10章分布式缓存 10.1数据库的前端缓存区文件系统内核缓冲区,位于物理内存的内核地址空间,除了使用O_DIRECT标记打开的文件以外,所有对磁盘文件的读写操作都要经 ...

随机推荐

iOS不得姐项目--TabBar的重复点击实现当前模块刷新;状态栏点击实现当前模块回滚到最顶部
一.实现功能:重复点击tabBar,刷新当前TableView,其余不受影响 <1>实现思路: 错误的方法: TabBar成为自己的代理,监听自己的点击--这种方法是不可取的,如果外面设置 ...
MySql_SQLyog快捷键
1. SQL格式化 F12 格式化当前行所在的SQL Ctrl+F12 格式化选中的SQL Shift+F12 格式化所有SQL 2. 窗口操作 Ctrl+T 打开一个新的查询窗口 Alt+ ...
c#学习<二>：数据类型
基元类型编译器直接支持的数据类型称为基元类型(primitive type).基元类型直接映射到Framework类库(FCL)中存在的类型(BCL是FCL的子集). C#中的基元类型 BCL类型 ...
lucene-查询query->PrefixQuery使用前缀搜索
PrefixQuery就是使用前缀来进行查找的.通常情况下,首先定义一个词条Term.该词条包含要查找的字段名以及关键字的前缀,然后通过该词条构造一个PrefixQuery对象,就可以进行前缀查找了. ...
如何破解Excel文档的编辑密码
对于Excel文档我们不仅可以设置打开密码,还可以设置几天几种密码,比如编辑密码.编辑密码又称写保护密码,是一种可以限制编辑权限的密码.如果我们在日常工作中发现自己忘记了excel编辑密码的话,那就需 ...
数据库连接池的选择 Druid
我先说说数据库连接数据库大家都不陌生,从名字就能看出来它是「存放数据的仓库」,那我们怎么去「仓库」取东西呢?当然需要钥匙啦!这就是我们的数据库用户名.密码了,然后我们就可以打开门去任意的存取东西了. ...
DIV 文字强制换行
一.对于div强制换行1.(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准.#wrap{white-space:normal; wid ...
【USACO 1.3】Ski Course Design
n个点(n<=1000)大小范围[0,100],改变一些点的值,使得极差不超过17,代价为改变值的平方. 枚举修改后的最低高度low,维护最小代价. /* TASK: skidesign LAN ...
CA 证书
1.ubuntu curl 命令报错(CA) kamil@vm-ubuntu:~$ curl https://szxyzs.vanke.com/DataCenter/datacenter/api cu ...
【BZOJ-2095】Bridge 最大流 + 混合图欧拉回路 + 二分
2095: [Poi2010]Bridges Time Limit: 10 Sec Memory Limit: 259 MBSubmit: 604 Solved: 218[Submit][Stat ...

angularjs笔记(三)

angularjs笔记(三)的更多相关文章

随机推荐

热门专题