AngularJS核心特性（四大点）
本人刚刚接触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核心特性（四大点）的更多相关文章
- angularJS的核心特性
前几天师傅让我了解一下angularJS,angularJS是一个前端框架,具体的优缺点和运用场景我现在也还没有搞清楚,暂时就先不做描述了,留到运用以后进行补充吧. angularJS四大核心特性:M ...
- 关于AngularJS学习整理---核心特性
接触.学习AngularJS已经三个多月了,随着学习的深入,有些东西刚开始不明白,现在开始慢慢明白起来.于是,开始整理这几个月的学习成果.要不又要忘了... 初学Angular,是看到慕课网大漠穷秋 ...
- angular学习笔记（1）- 四大核心特性
angular1学习笔记(1) - angular1四大核心特性 1.MVC model:数据模型层 controller:业务逻辑和控制逻辑 view:视图层,负责展示 2.模块化 Module ...
- Angular四大核心特性
Angular四大核心特性 Angular四大核心特性理论概述 MVC模式:它目的是为了分离视图.模型和控制器而设计出来的:其中数据模型用来储存数据,视图用来向用户展示应用程序,控制器充当模型和视图之 ...
- 乐字节Java8核心特性之方法引用
大家好,我是乐字节的小乐,上一次我们说到了Java8核心特性之函数式接口,接下来我们继续了解Java8又一核心特性--方法引用. Java8 中引入方法引用新特性,用于简化应用对象方法的调用, 方法引 ...
- Java Gradle入门指南之gretty插件（安装、命令与核心特性）
Java Web应用开发时常使用Gradle来进行项目管理,可以十分便利地解决包依赖等问题.war插件的出现,让项目部署成为一个复制粘贴的过程,那有没有办法让Java web应用的部署,就像w ...
- ES6核心特性
摘要:聊JS离不开ES6啊! 原文:ES6核心特性 作者:ljianshu 前言 ES6 虽提供了许多新特性,但我们实际工作中用到频率较高并不多,根据二八法则,我们应该用百分之八十的精力和时间,好好专 ...
- Zookeeper系列2 原生API 以及核心特性watcher
原生API 增删改查询 public class ZkBaseTest { static final String CONNECT_ADDR = "192.168.0.120"; ...
- 乐字节-Java8核心特性实战之Stream（流）
说起流,我们会想起手机 ,电脑组装流水线,物流仓库商品包装流水线等等.如果把手机 ,电脑,包裹看做最终结果的话,那么加工商品前的各种零部件就可以看做数据源,而中间一系列的加工作业操作,就可以看做流的处 ...
随机推荐
- 关于Kinect音频开发的探究
1.笔者在<Kinect体感程序设计入门>(王森著)的这本书中看到可以使用powershell和COM对象无缝整合,轻松的使用windows系统自带的语音合成功能. 步骤:•打开进入pow ...
- win7 加载 usb3.0驱动
1.去微软官网下一个 usb3.0 驱动 https://downloadcenter.intel.com/zh-cn/download/26254/-NUC-NUC6i7kyk-USB3-0-Win ...
- ssm搭建相关的问题
在搭建ssm框架时候踩得坑:1.对于拦截器url-parttern的设置:第一次设置的是/** 本以为这个是表示拦截所有,没想到这是错误的写法,正确的写法是/ 启动项目不会报错,但是会出现404 ...
- 字符串匹配算法BF和KMP总结
背景 来看一道leetcode题目: Implement strStr(). Returns the index of the first occurrence of needle in haysta ...
- 浅谈CDN技术的性能与优势
从淘宝架构中的CDN入手分析 使用CDN和反向代理提高网站性能.由于淘宝的服务器不能分布在国内的每个地方,所以不同地区的用户访问需要通过互联路由器经过不同长度的路径来访问服务器,返回路径也一样,所以数 ...
- Kafka详解四：Kafka的设计思想、理念
问题导读 1.Kafka的设计基本思想是什么?2.Kafka消息转运过程中是如何确保消息的可靠性的? 本节主要从整体角度介绍Kafka的设计思想,其中的每个理念都可以深入研究,以后我可能会发专题文章做 ...
- DanceLink
DanceLink是一个可以解决精确覆盖和重复覆盖的搜索算法 重复覆盖就是在精确覆盖的remove等处做改变 都是十字循环链表 精确覆盖 给出一个01矩阵 要求选择几行 使每一列都有且仅有一个1 在求 ...
- Flume-NG启动过程源码分析（三）(原创)
上一篇文章分析了Flume如何加载配置文件的,动态加载也只是重复运行getConfiguration(). 本篇分析加载配置文件后各个组件是如何运行的? 加载完配置文件订阅者Application类会 ...
- numpy array或matrix的交换两行
A[j,:] = A[maxindex,:] # 注意这样是一个很低级的错误!这样只是赋值 我们很容易想起python中的两个值交换一句搞定不用引入中间变量 a, b = b, a 但在numpy的a ...
- value optimized out的问题
看redis源码,查看某个变量的值的时候出现:value optimized out 变量被编译优化掉了,看不到了. 解决方法: 在编译redis的时候,make添加参数.0表示编译的时候不对代码进行 ...