1、ng-app

决定了angularjs的作用域范围，你可以如下使用：

  1. <html ng-app>
  2. …
  3. </html>

来让angularjs渲染整个页面，也可以使用

  1. <div ng-app='myapp'>
  2. ……
  3. </div>

来渲染其中的一部分。

2、ng-model

ng-model，当你的数据模型被改变的时候，譬如ng-model='test'，其中这个test的数值被改变的时候，{{test}}的数值也将跟随改变，也就是连接到ng-model中的test也跟随改变，如下

  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <script src="angular.min.js" type="text/javascript"></script>
  5.         <title>learing argularjs--widuu</title>
  6.     </head>
  7.     <body ng-app>
  8.     <input ng-model='test' >{{test}}
  9.     </body>
  10. </html>

3、angular.module

这个主要是做模块的注册，创建和索引，譬如我们ng-app想把这个注册成为一个服务就要用，当我们引用索引一个模块的时候也要使用

  1. angular.module(name, [requires], [configFn]);
  2. #name       类型string创建的检索模块的名称
  3. #requires   简单理解就是你需要包含的使用模块，譬如ngRoute路由模块
  4. #configFn   可以选配的功能模块，功能和module.config类似

4、controller

controller是angular.Module中的方法controller(name, constructor);其中name是controller的名字，constructor是控制器构造函数，我们利用一段代码来说明

  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <script src="angular.min.js" type="text/javascript"></script>
  5.         <script type="text/javascript">
  6.         var app = angular.module('myapp',[]);
  7.         app.controller('mytest',function($scope){
  8.             $scope.test="hello word";
  9.         });
  10.         </script>
  11.         <title>learing argularjs--widuu</title>
  12.     </head>
  13.     <body ng-app='myapp' ng-controller='mytest' >
  14.     <input ng-model='test'>{{test}}
  15.     </body>
  16. </html>

5、value

value也是angular.Module中的方法value(name, object);其中name是service的名称，object是服务器实例对象,这个时候我们就可以把上边的代码修改正成这样

  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <script src="angular.min.js" type="text/javascript"></script>
  5.         <script type="text/javascript">
  6.         var app = angular.module('myapp',[])
  7.         .value('testvalue','word');
  8.         app.controller('mytest',function($scope,testvalue){
  9.             $scope.test="hello "+ testvalue;
  10.         });
  11.         </script>
  12.         <title>learing argularjs--widuu</title>
  13.     </head>
  14.     <body ng-app='myapp' ng-controller='mytest' >
  15.     <input ng-model='test'>{{test}}
  16.     </body>
  17. </html>

6、factory

factory也是angular.Module中的方法factory(name, providerFunction);;其中name是service的名称，providerFunction是函数用于创建新的服务器对象,这个时候我们就可以把上边的代码修改正成这样

复制代码 代码如下:

  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <script src="angular.min.js" type="text/javascript"></script>
  5.         <script type="text/javascript">
  6.         var app = angular.module('myapp',[])
  7.             .value('testvalue','widuu')
  8.             .factory('testfactory',function(testvalue){
  9.                 return{
  10.                     lable:function(){
  11.                         return "this can output : hello "+ testvalue;
  12.                     }
  13.                 }
  14.             });
  15.         app.controller('mytest',function($scope,testvalue,testfactory){
  16.             $scope.test = "hello "+ testvalue;
  17.             $scope.output = testfactory.lable();
  18.         });
  19.         </script>
  20.         <title>learing argularjs--widuu</title>
  21.     </head>
  22.     <body ng-app='myapp' ng-controller='mytest' >
  23.     <input ng-model='test'>{{test}}
  24.     </p>
  25.         {{output}}
  26.     </body>
  27. </html>
  28. 7、provider

provider也是angular.Module中的方法provider(name, providerType);其中name是service的名称，providerFunction是函数用于创建新的服务器对象,这个跟factory差不多，我们现在用provider重写

复制代码 代码如下:

  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <script src="angular.min.js" type="text/javascript"></script>
  5.         <script type="text/javascript">
  6.         var app = angular.module('myapp',[])
  7.             .value('testvalue','widuu')
  8.             .provider('testprovider',
  9.                 function(){
  10.                   this.lable = "this will output : hello widuu";
  11.                   this.$get = function () {
  12.                        return this;
  13.                    }
  14.                 }
  15.             );
  16.         app.controller('mytest',function($scope,testvalue,testprovider){
  17.             $scope.test = "hello "+ testvalue;
  18.             $scope.output = testprovider.lable;
  19.         });
  20.         </script>
  21.         <title>learing argularjs--widuu</title>
  22.     </head>
  23.     <body ng-app='myapp' ng-controller='mytest' >
  24.     <input ng-model='test'>{{test}}
  25.     </p>
  26.         {{output}}
  27.     </body>
  28. </html>

　　

8、service

service也是angular.Module中的方法service(name, constructor);其中name是service的名称，constructor一个将被实例化的构造函数,这个跟factory差不多，我们现在用service重写

复制代码 代码如下:

  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <script src="angular.min.js" type="text/javascript"></script>
  5.         <script type="text/javascript">
  6.         var app = angular.module('myapp',[])
  7.             .value('testvalue','widuu')
  8.             .service('testservice',
  9.                 function(testvalue){
  10.                     this.lable = function(){
  11.                         return "this will output:hello "+testvalue;
  12.                     }
  13.                 }
  14.             );
  15.         app.controller('mytest',function($scope,testvalue,testservice){
  16.             $scope.test = "hello "+ testvalue;
  17.             $scope.output = testservice.lable();
  18.         });
  19.         </script>
  20.         <title>learing argularjs--widuu</title>
  21.     </head>
  22.     <body ng-app='myapp' ng-controller='mytest' >
  23.     <input ng-model='test'>{{test}}
  24.     </p>
  25.         {{output}}
  26.     </body>
  27. </html>

　　

9、constant

constant也是angular.Module中的方法constant(name, object);其中name是常量的名称，而object是常量的值，我们可以这样写的

复制代码 代码如下:

  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <script src="angular.min.js" type="text/javascript"></script>
  5.         <script type="text/javascript">
  6.         var app = angular.module('myapp',[])
  7.             .value('testvalue','widuu')
  8.             .constant('count',23)
  9.             .service('testservice',
  10.                 function(testvalue,count){
  11.                     this.lable = function(){
  12.                         return "this will output:hello "+testvalue+",age is "+count;
  13.                     }
  14.                 }
  15.             );
  16.         app.controller('mytest',function($scope,testvalue,testservice){
  17.             $scope.test = "hello "+ testvalue;
  18.             $scope.output = testservice.lable();
  19.         });
  20.         </script>
  21.         <title>learing argularjs--widuu</title>
  22.     </head>
  23.     <body ng-app='myapp' ng-controller='mytest' >
  24.     <input ng-model='test'>{{test}}
  25.     </p>
  26.         {{output}}
  27.     </body>
  28. </html>

　　

AngularJS基础语法的更多相关文章

  1. Angularjs基础（学习整理）

    AngularJS 通过 ng-directives 扩展了 HTML. ng-app 指令定义一个 AngularJS 应用程序. ng-model 指令把元素值(比如输入域的值)绑定到应用程序. ...

  2. python 全栈开发，Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)

    一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...

  3. Python3 与 C# 面向对象之～继承与多态 Python3 与 C# 面向对象之～封装 Python3 与 NetCore 基础语法对比（Function专栏） [C#]C#时间日期操作 [C#]C#中字符串的操作 [ASP.NET]NTKO插件使用常见问题 我对C#的认知。

    Python3 与 C# 面向对象之-继承与多态   文章汇总:https://www.cnblogs.com/dotnetcrazy/p/9160514.html 目录: 2.继承 ¶ 2.1.单继 ...

  4. Swift与C#的基础语法比较

    背景: 这两天不小心看了一下Swift的基础语法,感觉既然看了,还是写一下笔记,留个痕迹~ 总体而言,感觉Swift是一种前后端多种语言混合的产物~~~ 做为一名.NET阵营人士,少少多多总喜欢通过对 ...

  5. iOS-----正则表达式的基础语法

    正则表达式简单语法总结 一.什么是正则表达式 从概念上来说,正则表达式也是一门小巧而精炼的语言,它可以用来简化检索特定的字符串,替换特定字符等功能,有许多开发语言工具,都内嵌支持正则表达式.那么一个正 ...

  6. python之最强王者（2）——python基础语法

    背景介绍:由于本人一直做java开发,也是从txt开始写hello,world,使用javac命令编译,一直到使用myeclipse,其中的道理和辛酸都懂(请容许我擦干眼角的泪水),所以对于pytho ...

  7. emmet 系列（1）基础语法

    emmet 系列(1)基础语法 emmet 是一个能显著提升开发html和css开发效率的web开发者工具 emmet基本上目前已知的编辑器都有相应的插件,各个编辑器的emmet插件的下载地址:点我下 ...

  8. Scala基础语法 （一）

    如果你之前是一名 Java 程序员,并了解 Java 语言的基础知识,那么你能很快学会 Scala 的基础语法. Scala 与 Java 的最大区别是:Scala 语句末尾的分号 ; 是可选的. 我 ...

  9. AngularJS基础入门初探

    一.AngularJS简介 1.1 什么是AngularJS (1)一款非常优秀的前端JS框架,可以方便实现MVC/MVVM模式 (2)由Misko Hevery 等人创建,2009年被Google所 ...

随机推荐

  1. Python操作 RabbitMQ、Redis、Memcache

    Python操作 RabbitMQ.Redis.Memcache Memcached Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数 ...

  2. mysql 5.6 后热数据的加载

    mysql 5.6 后热数据的加载 转自:http://blog.itpub.net/20892230/viewspace-2127469/ 故障现象:在数据库重启后,碰巧遇到业务高峰期,连接数满,导 ...

  3. Shell初学（五）bash shell的基本功能

    记住,所谓的bash shell 并不单纯指的是shell脚本,其实是Linux系统的所有指令集. shell脚本 只是汇总了指令集到文件,然后按流程和顺序执行. [1]如何查看我们的预设shell ...

  4. swift MT报文解析处理

    swift 官方资料:https://www2.swift.com/knowledgecentre/publications/us5mc_20180720/2.0?topic=alec.htm#gen ...

  5. Dubbo架构

    原文链接http://dubbo.apache.org 架构图 节点角色说明 节点 角色说明 Provider 暴露服务的服务提供方 Consumer 调用远程服务的服务消费方 Registry 服务 ...

  6. 使用Jsoup爬取网站图片

    package com.test.pic.crawler; import java.io.File; import java.io.FileOutputStream; import java.io.I ...

  7. Eclipse快速生成do while if 等方法

    选中所需要加方法的代码  右键  选中 surrounded with选择你需要就可以了

  8. 109、Secret的使用场景 （Swarm16）

    参考https://www.cnblogs.com/CloudMan6/p/8082429.html   我们可以用secret管理任何敏感数据.这些敏感数据是容器在运行时需要的.同时我们又不想把这些 ...

  9. reduce方法的封装使用

    reduce()方法 语法: arr.reduce( function(previousValue, item, index, arr) { }, initialValue) previousValu ...

  10. axios设置了responseType: 'json‘’，ie问题

    在ie会有问题 如果返回的数据会变成字符串 在拦截器中用json.parse转 // 在axios的响应头中设置~~~ axios.interceptors.response.use( respons ...