Angular.js-2入门
1.angular与MVC
MVC即Model View Controller，是模型(model)-视图(view)-控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。
M 模型对应数据库
V 视图对应HTML页面
C 控制器处理用户交互
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<style>
body {
padding: 10px;
}
</style>
<body ng-app="app">
<div ng-controller="MyCtrl">
<input type="text" ng-model="msg"/>
<h1>{{msg}}</h1>
</div>
</body>
<script src="js/angular.min.js"></script>
<script>
angular.module('app',[])//module创建一个angular模块
.controller('MyCtrl',function($scope){//controller相当于简单的MVC，MyCtrl相当于C,$scope相当于M
$scope.msg="angular";//每一个模型，通过双向绑定，把模型绑定到V上即HTML页面
})
.controller('MyCtrl1',function($scope){})//可以创建更多
.controller('MyCtrl2',function($scope){})
.controller('MyCtrl3',function($scope){});
</script>
</html>
2.binding双向绑定
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">
</head>
<body style="padding:10px;" ng-app="">
<div>
<input type="text" ng-model="uname"/>
<h1 ng-bind="uname">{{}}</h1><!--显示输入框内容-->
<h1 ng-clock class="ng-clock">{{uname}}</h1><!--显示输入框内容-->
<!--{{}}内可放置任何表达式-->
<div ng-bind="'用户名:'+uname"></div><!--显示：用户名:button-->
<div class="{{uname}}">{{uname}}</div><!--显示button标签-->
</div>
</body>
<script src="js/angular.min.js"></script>
</html>
3.controller的使用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">
</head>
<body style="padding: 10px" ng-app="app">
<div ng-controller="FirstCtrl">
<!--<h1>{{msg}}</h1>同ng-bind且可省去{{}}-->
<h1 ng-bind="msg"></h1>
<input type="text" ng-model="msg"/>
</div>
<div ng-controller="NextCtrl">
<!--<h1>{{msg}}</h1>-->
<h1 ng-bind="msg"></h1>
<input type="text" ng-model="msg"/>
</div>
<!--ng-controller明确其作用域边界-->
</body>
<script src="js/angular.min.js"></script>
<script>
angular.module('app',[])
.controller('FirstCtrl',function($scope){
$scope.msg="hello angular";
})
.controller('NextCtrl',function($scope){
$scope.msg="hello 极客";
}); </script>
</html>
4.scope的变量与方法
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">
</head>
<body style="padding:10px;" ng-app="app">
<p>在scope上定义方法并在页面上进行绑定调用</p>
<p>在scope上定义变量并在方法中使用</p>
<div ng-controller="MyCtrl">
<!--<input type="text" ng-model="msg"/>-->
<!--<h1>{{reverse()}}</h1>-->
<!--在页面上绑定调用scope中定义的方法-->
<input type="text" ng-model="user.uname"/>
<input type="text" ng-model="user.pwd"/>
<div class="button" ng-click="login()">登录</div>
<div ng-show="errormsg.length>0" class="alert-box">{{errormsg}}</div>
</div>
</body>
<script src="js/angular.min.js"></script>
<script>
angular.module('app',[])
.controller('MyCtrl',function($scope){
$scope.msg="";
$scope.user={uname:'',pwd:''};
$scope.errormsg="";
$scope.reverse=function(){//在scope上定义方法
return $scope.msg.split("").reverse().join("")
};
$scope.login=function(){
if($scope.user.uname=="admin" && $scope.user.pwd=="123"){
alert("登陆成功");
}else{
$scope.errormsg="用户名或密码错误";
}
}
}); </script>
</html>
5.定义service服务
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">
</head>
<body style="padding:10px" ng-app="app">
<div ng-controller="MyCtrl">
<h1>{{realname}}</h1>
<h1>{{http}}</h1>
<h1>{{data.msg}}</h1>
<h1>{{uname}}</h1>
</div>
</body>
<script src="js/angular.min.js"></script>
<script>
angular.module('app',[])
//service多种表现形式，四种创建模式value（值可改变） constant(常量不可改变) factory service provider（高级）
.value('realname','zhaoliu')
.value('realname','wangwu')
.constant('http','www.baidu.com')
.constant('http','www.sohu.com')
.factory('Data',function(){
return {
msg:'你好吗',
setMsg:function(){
this.msg="我不好";
}
}
})
.service('User',function(){
this.firstname="上官";
this.lastname="小子";
this.getName=function(){
return this.firstname+this.lastname;
}
})
.controller('MyCtrl',function($scope,realname,http,Data,User){
$scope.realname=realname;
$scope.http=http;
$scope.data=Data;
Data.setMsg();
$scope.uname=User.getName();
}); </script>
</html>
6.在controller中使用service服务
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">
</head>
<body style="padding:10px" ng-app="app">
<p>service:如何在多个controller中共享数据</p>
<div ng-controller="FCtrl">
<input type="text" ng-model="data.msg"/>
<h2>{{data.msg}}</h2>
</div>
<div ng-controller="SCtrl">
<input type="text" ng-model="data.msg"/>
<h2>{{data.msg}}</h2>
</div>
</body>
<script src="js/angular.min.js"></script>
<script>
angular.module('app',[])
.factory('Data',function(){
return {
msg:'我来自factory'
}
})
.controller('FCtrl',function($scope,Data){
$scope.data=Data;
})
.controller('SCtrl',function($scope,Data){
$scope.data=Data;
});
</script>
</html>
6.常用指令可查看官方文档api
Angular.js-2入门的更多相关文章
- Angular JS从入门基础 mvc三层架构 常用指令
Angular JS从入门基础 mvc模型 常用指令 ★ 最近一直在复习AngularJS,它是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心 ...
- angular.js简单入门。
小弟刚接触angular js 就写了一个简单的入门.后续慢慢补... 首先看 html 页面. <html> <meta charset="UTF-8"> ...
- angular.js快速入门 hello world
我们整个系列的学习会去写一个简单blog雏形,如果有精力再完善美化. 但是这篇还是要从HelloWorld开始学习. angular.js 文件加载我们选用 bootstrap中文网提供的一个cdn服 ...
- Angular JS + Express JS入门搭建网站
3月份开始,接到了新的任务,跟UI开发有关,用的是Angular JS,Express JS等技术.于是周末顺便学习下新技术. 组里产品UI架构如下: 其中前端,主要使用Angular JS框架,另外 ...
- Angular.js 入门（一）
最近在学习angular.js,为此方便加深对angular.js前端框架的理解,因此写下这篇angular.js入门 首先介绍下什么是angular.js? AngularJS 是一个 JavaSc ...
- Angular.js入门
一.引入angular.js <script type="text/javascript" src="../plugins/angularjs/angular.m ...
- Web API 2 入门——使用ASP.NET Web API和Angular.js构建单页应用程序（SPA）（谷歌翻译）
在这篇文章中 概观 演习 概要 由网络营 下载网络营训练包 在传统的Web应用程序中,客户机(浏览器)通过请求页面启动与服务器的通信.然后,服务器处理请求,并将页面的HTML发送给客户端.在与页面的后 ...
- 新手入门学习angular.js的心得体会
看了一天的angular.js,只要记住这是关于双向数据绑定 和单向数据绑定就可以,看看开发文档,短时间内还是可以直接入手的,看个人理解能力(我是小白). 这几天开始着手学习angularjs的有关知 ...
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
- Angular JS 学习笔记(自定义服务：factory，Promise 模式异步请求查询:$http,过滤器用法filter，指令:directive)
刚学没多久,作了一个小项目APP,微信企业号开发与微信服务号的开发,使用的是AngularJS开发,目前项目1.0版本已经完结,但是项目纯粹为了赶工,并没有发挥AngularJS的最大作用,这几天项目 ...
随机推荐
- mongoDB BI 分析利器 - PostgreSQL FDW (MongoDB Connector for BI)
背景 mongoDB是近几年迅速崛起的一种文档型数据库,广泛应用于对事务无要求,但是要求较好的开发灵活性,扩展弹性的领域,. 随着企业对数据挖掘需求的增加,用户可能会对存储在mongo中的数据有挖掘需 ...
- *p++、*++p、(*p)++区别
关于数组指针的谜题 假设 p 是指向数组 arr 中第 n 个元素的指针,那么 *p++.*++p.(*p)++ 分别是什么意思呢? *p++ 等价于 *(p++),表示先取得第 n 个元素的值,再将 ...
- 阿里云上面部署mysql
0.卸载已有的mysql 系统中可能早已存在mysql数据库,所以在安装之前我们需要将其卸载掉. # rpm -qa|grep -i mysql 该命令将显示已经安装了的mysql软件,之后通过下面的 ...
- 为某个云服务设置RVIP
获取所有Azure(云)服务Get-AzureService #查看某个云服务的LocationGet-AzureService -ServiceName tests |select location ...
- CMake是用于生成make文件的跨平台编译文件
参考: https://www.cnblogs.com/hbccdf/p/introduction_of_cmake.html https://elloop.github.io/tools/2016- ...
- 漫谈 Clustering (4): Spectral Clustering
转:http://blog.pluskid.org/?p=287 如果说 K-means 和 GMM 这些聚类的方法是古代流行的算法的话,那么这次要讲的 Spectral Clustering 就可以 ...
- webpack之react开发前准备
今天抽出空来,翻了翻webpack之react的书籍,看到刚出的es6语法,貌似是简单了不少,但是兼容性确实不容乐观,如果实在要用那也不是不可以的,首先就跟随我来看下这个插件吧: Babel:这个插件 ...
- ADB命令详解及大全（ 声明：此文是参考大佬博客所做的笔记！）
adb是什么? adb的全称为Android Debug Bridge,就是起到调试桥的作用.通过adb我们可以在Eclipse中方面通过DDMS来调试Android程序,说白了就是debug工具.a ...
- Github 删除 repository
Github 删除 repository 如下图操作
- LRU缓存算法与pylru
这篇写的略为纠结,算法原理.库都是现成的,我就调用了几个函数而已,这有啥好写的?不过想了想,还是可以介绍一下LRU算法的原理及简单的用法. LRU(Least Recently Used,最近最少 ...