本人刚刚接触AngularJS，还不太熟悉，就说说我目前遇到的一些注意点吧。

　　1、调用外来文件script文件

AngularJS核心特性一  MVC

MVC设计模式

html文件

<!DOCTYPE html>
<html >
　　<head>
　　<meta charset="UTF-8">
　　<title></title>
　　</head>
　　<body>

　　　　//ng  表示 angular ,ng-app放在这一行的div上，就决定与Angular脚本放哪里，表示作用于只在这一行内的div有效；ng-controller 表示控制器；greeting.text 表示 module参数

　　　　//注意： 调外来文件的时候，ng-app 不需要带参数，如：ng-app="myAPP"
　　　　<div ng-app ng-controller="HelloAngular"> 
　　　　　　<p>{{greeting.text}},Angular</p>
　　　　</div>
　　　　<script type="text/javascript" src="js/angular.min.js" ></script>//angularJs的封装好的文件
　　　　<script type="text/javascript" src="js/angular.js" ></script>//自己写的script外来文件
　　</body>
</html>

scrript文件

//不需要（function(){表达式}）();只需要一个函数 function  HelloAngular（ng-controller的控制器参数）{表达式}

function HelloAngular($scope){
　　$scope.greeting = {
　　　　text : 'hello'
　　};
}

AngularJS核心特性二    模块化

//但是上面的script是全局，这样做会污染全局空间，这样做不怎么高大尚，所以将其模块化

html文件

<!DOCTYPE html>
<html >
　　<head>
　　<meta charset="UTF-8">
　　<title></title>
　　</head>
　　<body>

　　　　//ng  表示 angular ,ng-app放在这一行的div上，就决定与Angular脚本放哪里，表示作用于只在这一行内的div有效；ng-controller 表示控制器；greeting.text 表示 module参数

　　　　//ng-app="myAPP"相当于 js里面的main方法

　　　　//注意： 调外来文件的时候，ng-app 不需要带参数，如：ng-app="myAPP"
　　　　<div ng-app="helloAngular" ng-controller="HelloAngular"> 
　　　　　　<p>{{greeting.text}},Angular</p>
　　　　</div>
　　　　<script type="text/javascript" src="js/angular.min.js" ></script>//angularJs的封装好的文件
　　　　<script type="text/javascript" src="js/angular.js" ></script>//自己写的script外来文件
　　</body>
</html>

scrript文件

//不需要（function(){表达式}）();只需要一个函数 function  HelloAngular（ng-controller的控制器参数）{表达式}

var app = angular.module("helloAngular",[]);  //第一个参数：定义一个模块  “helloAngular” ； 第二个参数： []  表示 本模块所依赖的子模块的集合（就像是main函数下的调用的子函数）
app.controller("HelloAngular",['$scope', //$scope  告诉AngularJS 要使用$scope参数   $scope 必须与下面调用的函数带的参数 $scope 是一样的
　　function (函数名(随便取))($scope){
　　　　$scope.greeting = {
　　　　text : 'Hello'
　　　　}
　　}
]);

AngularJS核心特性三  ---- 指令系统（可以自定义标签名，然后写封装他们标签名；除了可以封装自定义标签，还可以做其他的功能）

html文件

<!DOCTYPE html>
<html ng-app="myModule">
　　<head>
　　<meta charset="UTF-8">
　　<title>driection指令系统</title>
　　</head>
　　<body>
　　　　<hello></hello> //随便去的标签名字
　　　　<script type="text/javascript" src="js/angular.min.js" ></script>
　　　　<script type="text/javascript" src="js/angular_Direction.js" ></script>
　　</body>
</html>

angular_Direction.js文件

var myModule = angular.module("myModule",[]);  //angular.module创建模块
myModule.directive("hello",function(){  //‘hello’ 自定义标签名
　　return {
　　　　restrict:"E",
　　　　template:'<div>Hi everyone!</div>',   //替换“hello”标签名的模块
　　　　replace: true
　　}
});

AngularJS核心特性四  ----- 双向数据绑定（MVVM）

html文件  不需要JS文件

<!DOCTYPE html>
<html ng-app>
　　<head>
　　<meta charset="UTF-8">
　　<title></title>
　　</head>
　　<body>
　　　　<div>
　　　　　　<input ng-model="greeting.text" />
　　　　　　<p>{{greeting.text}},AngularJS</p>
　　　　</div>
　　　　<script type="text/javascript" src="js/angular.min.js" ></script>
　　</body>
</html>

AngularJS核心特性（四大点）的更多相关文章

  1. angularJS的核心特性

    前几天师傅让我了解一下angularJS,angularJS是一个前端框架,具体的优缺点和运用场景我现在也还没有搞清楚,暂时就先不做描述了,留到运用以后进行补充吧. angularJS四大核心特性:M ...

  2. 关于AngularJS学习整理---核心特性

    接触.学习AngularJS已经三个多月了,随着学习的深入,有些东西刚开始不明白,现在开始慢慢明白起来.于是,开始整理这几个月的学习成果.要不又要忘了...  初学Angular,是看到慕课网大漠穷秋 ...

  3. angular学习笔记（1）- 四大核心特性

    angular1学习笔记(1) -  angular1四大核心特性 1.MVC model:数据模型层 controller:业务逻辑和控制逻辑 view:视图层,负责展示 2.模块化 Module ...

  4. Angular四大核心特性

    Angular四大核心特性 Angular四大核心特性理论概述 MVC模式:它目的是为了分离视图.模型和控制器而设计出来的:其中数据模型用来储存数据,视图用来向用户展示应用程序,控制器充当模型和视图之 ...

  5. 乐字节Java8核心特性之方法引用

    大家好,我是乐字节的小乐,上一次我们说到了Java8核心特性之函数式接口,接下来我们继续了解Java8又一核心特性--方法引用. Java8 中引入方法引用新特性,用于简化应用对象方法的调用, 方法引 ...

  6. Java Gradle入门指南之gretty插件（安装、命令与核心特性）

        Java Web应用开发时常使用Gradle来进行项目管理,可以十分便利地解决包依赖等问题.war插件的出现,让项目部署成为一个复制粘贴的过程,那有没有办法让Java web应用的部署,就像w ...

  7. ES6核心特性

    摘要:聊JS离不开ES6啊! 原文:ES6核心特性 作者:ljianshu 前言 ES6 虽提供了许多新特性,但我们实际工作中用到频率较高并不多,根据二八法则,我们应该用百分之八十的精力和时间,好好专 ...

  8. Zookeeper系列2 原生API 以及核心特性watcher

    原生API 增删改查询 public class ZkBaseTest { static final String CONNECT_ADDR = "192.168.0.120"; ...

  9. 乐字节-Java8核心特性实战之Stream（流）

    说起流,我们会想起手机 ,电脑组装流水线,物流仓库商品包装流水线等等.如果把手机 ,电脑,包裹看做最终结果的话,那么加工商品前的各种零部件就可以看做数据源,而中间一系列的加工作业操作,就可以看做流的处 ...

随机推荐

  1. 普通神经网络和RNN简单demo (一)

    2017-08-04 花了两天时间看了下神经网络的一点基础知识,包括单层的感知机模型,普通的没有记忆功能的多层神经网咯,还有递归神经网络RNN.这里主要是参考了一个博客,实现了几个简单的代码,这里把源 ...

  2. 解决noSession问题

    1.问题描述:对于根据id查询时,在dao通过load方式查询对象时,加载页面会报 noSession异常. 严重: Servlet.service() for servlet [springDisp ...

  3. 字符串问题之 去掉字符串中连续出现K个0的子串

    字符串中刚好出现K个连续的‘O’,则把K个连续‘O’字符去除,返回处理后的字符串 比如 str="AOOOOOBOOO"   k=3, 返回“AOOOOOB” 这个题的解决思路也有 ...

  4. How to choose from Viewstate, SessionState, Cookies and Cache

    https://devshop.wordpress.com/2008/04/10/how-to-choose-from-viewstate-sessionstate-cookies-and-cache ...

  5. SpringCloud-路由网关(Zuul)

    在微服务架构中,需要几个基础的服务治理组件,包括服务注册与发现.服务消费.负载均衡.断路器.只能路由.配置管理等,由这几个基础组件相互协作,共同组建了一个简单的微服务系统. 在Spring Cloud ...

  6. STL视频_01

    ZC:这里视频里面有一个调试小技巧,VS08/VS2010开始,控制台程序会自动退出(不像VC6),那么可以在 函数退出的最后一句语句上设置断点,然后查看控制台打印出来的信息.ZC:这一讲,给我的感觉 ...

  7. nova Evacuate

    作用:当一个 node down 掉后,在新的 node 上根据其 DB 中保存的信息重新 build down node 上虚机.这个往往在虚机 HA 方案中用到.它尽可能地将原来的虚机在新的主机上 ...

  8. 批量反编译class文件

    首先得进入jad的路径中,一般都放在jdk的安装目录的bin中 进入到该目录中,否则无法使用jad命令. jad -o -r -d F:\src -s java F:\classes\**\*.cla ...

  9. cpu和gpu的区别和联系是什么

    cpu和gpu的区别和联系是什么 一.总结 一句话总结:CPU:复杂任务,核少,做串行,计算能力只是CPU很小的一部分,处理复杂逻辑: GPU:简单任务,核多,做并行(大吞吐量),做显卡的图象单元计算 ...

  10. OSX 10.11 El Caption USB安装盘制作方法

    OSX 10.11 El Caption USB安装盘制作方法 官方在线下载地址:https://developer.apple.com/osx/download/ 1. 用磁盘工具将USB盘抹掉或者 ...