AngularJS 学习笔记

最新推荐文章于 2019-09-06 10:14:30 发布
最新推荐文章于 2019-09-06 10:14:30 发布
阅读量207 收藏
点赞数
分类专栏： /root/WEB前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013987661/article/details/53008288
版权

1. 数据绑定

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="">
    <p>名字 : <input type="text" ng-model="name"></p>
    <h1>Hello {{name}}</h1>
    <h1 ng-bind="name"></h1>
</div>

</body>
</html>
1. 在标签中加上"ng-app"表示这是一个AngularJS应用程序的容器
2. ng-model="name"表示ng把form表单的val属性获取到name变量，对应mvc框架的model
3. {{name}} 表示输出name变量，和laravel的blade模版有点像
4.  ng-bind="name" 表示把标签里面的内容替换成name变量的值

2.mvc架构

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<p>尝试修改以下表单。</p>

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

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});
</script>
    1.  在html中通过ng-controller="myCtrl"指定控制器名
    2.  在js实例化一个ng对象，然后写控制器和方法

3.初始化与表达式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div ng-app="" ng-init="quantity=1;cost=5">
<p>总价: {{ quantity * cost }}</p>
</div>

</body>
</html>
 1.  ng-init="quantity=1;cost=5" 用于初始化变量。
 2.  {{ quantity * cost }} 用于进行运算并输出。

4. 循环

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

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

<ul>
    <li ng-repeat="x in names">{{x}}</li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
});
</script>

</body>
</html>
1.如果模型对应的数据是一个数组，可用ng-repeat="x in names"循环输出。

5.过滤器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

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

<p>姓名为 {{ lastName | uppercase }}</p>

</div>

<script src="personController.js"></script>

</body>
</html>
[*]别以为很高端，其实和tp的模版输出后的处理很像

6.服务

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

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

<p>欢迎信息:</p>

<h1>{{myWelcome}}</h1>

</div>

<p> $http 服务向服务器请求信息，返回的值放入变量 "myWelcome" 中。</p>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("welcome.htm").then(function (response) {
      $scope.myWelcome = response.data;
  });
});
</script>

</body>
</html>
[*]ng可以使用系统的提供的一些$开头的对象封装好的一些函数作为服务让我们使用，这些对象我们也可以自己创建
[*]要实现大部分的服务的功能，我还是觉得用jq比较方便，ng很多都并没有什么用。。

7. 选择框

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

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

<select ng-model="selectedName" ng-options="x for x in names">
</select>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Google", "Runoob", "Taobao"];
});
</script>

<p>该实例演示了 ng-options 指令的使用。</p>

</body>
</html>

[*]ng使用ng-options可以创建选择框，好像没什么用，很多后端框架都有循环局域可以解决这个问题的

8.禁用状态和隐藏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">点我!</button>
<p ng-show="true">我是可见的。</p>
</p>
<p>
<input type="checkbox" ng-model="mySwitch"/>按钮
</p>
<p>
{{ mySwitch }}
</p>
</div> 

</body>
</html>
[*].如果在ngapp中，在一个标签中加入ng-disabled="true",那么这个标签就会获取disabled属性。如果加入ng-show="true"，标签就会隐藏。
[*].只有学过ng才会知道jq的强大

9.事件绑定

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

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

<button ng-click="toggle()">隐藏/显示</button>

<p ng-hide="myVar">
名: <input type=text ng-model="firstName"><br>
姓: <input type=text ng-model="lastName"><br><br>
姓名: {{firstName + " " + lastName}}
</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.myVar = false;
    $scope.toggle = function() {
        $scope.myVar = !$scope.myVar;
    }
});
</script>

</body>
</html>
[*].ng提供了事件绑定的方法，真的是一切皆对象啊。

10.自定义指令

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div ng-app="myApp" runoob-directive></div>

<script>

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

app.directive("runoobDirective", function() {
    return {
        template : "我在指令构造器中创建!"
    };
});
</script>

</body>
</html>
[*].ngapp可以自定义一个指令，还是挺方便。

11.文件包含

<body>

<div class="container">
  <div ng-include="'myUsers_List.htm'"></div>
  <div ng-include="'myUsers_Form.htm'"></div>
</div>

</body>
[*].ngapp可以使用指令包另一个文件包含进来.
[*].要实现这样的效果，html的frame和jq的$.load()都可以实现.
Jsonkim
关注
专栏目录
AngularJS学习笔记
08-26
### AngularJS学习笔记知识点解析 #### 一、AngularJS简介 AngularJS是由Google推出的一款JavaScript库，虽然在本文档中作者将其称为“工具”，但实际上它更接近于一个完整的前端开发框架。AngularJS的设计理念...
Angularjs学习笔记
最新发布
瓜皮伦的博客
12-09 310
​ 先引入表单的一些内置依赖import {//构造函数里注入FormBuilder constructor(private fb : FormBuilder) {} //错误提醒数据 formErrors = {//在组件类的初始化函数里对表单中的元素的校验进行定义，并调用表单的valueChanges方法，检测表单的输入的变化 ngOnInit() : void {if(!
angularJs 学习笔记
dengqian9787的博客
06-06 129
ng-app="" 定义了angularJS的使用范围 eg: ng-model="变量" 定义变量名 eg: ng-init 指令初始化AngularJs应用程序变量 eg: ng-bind 指令把变量绑定到某个段落的innerHTML eg: ng-repeat 指令会重复一个html元素 eg: 依次输出names数组中的值 ng-disable...
angularjs学习笔记
二枫的代码小窝
07-21 678
angularJS笔记
angularJS学习笔记
qq_35603868的博客
08-08 207
今天开始学习angularJS
angularjs 学习笔记
Tomihao
11-11 5278
angular framework 知识点 开发实践
AngularJs 学习笔记
weixin_42080477的博客
09-06 259
AngularJS 有哪些特性？ MVC模式 模块系统 指令系统 依赖注入 List item 双向数据绑定 1、指令 ng-app ng-controller ng-click ng-model ng-repeat 2、依赖注入（服务） $scope $ scope.$watch —— 有三个参数：1、监听地对象 2、监听回调 3、是否进行深度地监听：true 或 false $ s...
AngularJS学习笔记1
u010723516的博客
12-13 305
AngularJS 是一个 JavaScript 框架。它可通过 标签添加到 HTML 页面。 AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。 AngularJS 通过 ng-directives 扩展了 HTML。 AngularJS 指令 ng-app 指令定义一个 AngularJS 应用程序。 ng-model 指令把元素
AngularJs学习笔记
轻描淡写
12-20 208
14820171220 1、ng-repeat：【angularJs的迭代器】：ng-repaet将会生成便签内的所有html元素的一份拷贝，包括存放指令的标签。可以通过 &index 返回当前引用的元素的序号，还可以通过 $first、$middle以及$last来查看当前元素是否为第一、中间、或最后的Boolean值。 2、区分UI和控制器的职责： 1)、为应用中的模型设值初始化状态。 2)、通过$scope对象把数据模型和函数暴露给视图(UI模板)。 3)、监视模型其余部分的变化，并
JS AngularJS 学习笔记
03-26
**AngularJS 框架详解** AngularJS 是一个强大的JavaScript框架，由Google维护，用于构建动态Web应用。它通过MVC（模型-视图-控制器...通过深入学习和实践，你可以有效地利用AngularJS构建高效、可维护的Web应用程序。
jquery的ajax方法的回调函数详解
热门推荐
Jsonkim的博客
09-22 1万+
前言 最近学习jquery的$.post(),$.get(),$("#div1").load(),$.ajax()方法，发现确实很方便，但是对函数返回值确不理解，后面自己做了几个实验，总结后把结论整理后和大家一起分享. 后台代码第一种情况，回调函数只有一个传入参数前端代码 输出的调试结果 第二种情况，回调函数有两个传入参数前端代码 输出的调试结果 第三种情况，回调函数有三个传入参数前端代码 调
微信jssdk使用心得与源码分析
Jsonkim的博客
11-15 7454
1.前言javascript的功能固然很强大，但是对移动平台的支持不是很好。所以微信官方就出了一个浏览器，内置在微信中，阉割了一下原生js的支持，并且封装好了sdk，提供的sdk功能还是比较强大，可以直接调用相机，相册，录音这些功能。但是要使用的话需要微信公众号的凭据，需要在微信服务器和开发者服务器进行双向绑定。1-1.本例子demo下载点我下载2.使用步骤2-1.微信服务器绑定开发者服务器2-1-
kindeditor和ueditor编辑器使用方法总结
Jsonkim的博客
01-12 6702
1.编辑器的使用套路 使用编辑器，首先要引入编辑器的js文件和css文件. 使用用内置的方法实例化对象，在实例化对象的时候，需要传入编辑器占位的id，也可以传递参数，或事件绑定. 传递参数会以json的形式传递进去，包括各种控件的自定义和某些特性的禁用. 2.kindeditor编辑器的使用2-1.引入编辑器所需的资源文件<link rel="stylesheet" href="../themes/
关于前端惰性加载（jquery_lazyload）的使用和原理分析
Jsonkim的博客
01-12 6476
1.前言有时我们会有这样的需求，当网页有很多张图片的时候，我们不希望一次性就把图片加载完，而是希望当浏览器滑动到指定位置的时候再加载，这样可以节省带宽，它也能帮助减轻服务器负载。那么这种需求就需要利用lazyload了。 jquery_lazyload.js是基于jq的一个扩展，需要引入jq后使用。 2.使用方法2-1.引入jquery和lazyload拓展<script src="jquery-1
Js绑定事件的几种方式
Jsonkim的博客
09-18 3502
1.直接在标签中绑定<!DOCTYPE html> <html> <head> <title>直接在标签里绑定事件</title> </head> <body> <input type="button" value="点我触发事件" onclick="fun1('liming')" /> <script type="text/javascript">
WeUI学习笔记
Jsonkim的博客
11-23 2110
1.前言WeUI 是微信官方针对微信网页开发做的一个前端框架。使用这个框架，可以让你的程序看起来更加接近原生的应用，更加的美观。 jQuery WeUI 是WeUI的一个jQuery实现版本，除了实现了官方插件之外，它还提供了如下拉刷新、日历、地址选择器等丰富的拓展组件。jQuery WeUI 中的JS组件均是以JQuery 插件的形式提供，使用非常方便，并且可以和React、Angular、VU
AngularJs学习笔记：组件与工作原理详解
"AngularJs学习笔记提供了一个全面深入的入门指南，专为初学者设计，以中文呈现，便于理解和学习。主要涵盖了AngularJs的核心概念，包括但不限于组件、运行时环境、作用域、视图与控制器、模型、指令、过滤器、注入...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值