Angular基础开始
这个我是想用Angular写一个简单的WebApp，这个是一个简简单单路由:
公共模板--index.html：
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>首页</title>
<link rel="stylesheet" href="css/app.css" media="all" />
<script src="js/angular.js"></script>
<script src="js/angular-route.js" type="text/javascript" charset="utf-8"></script>
<script src="js/app.js"></script>
<script src="js/controller/controller.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<header>松鼠闹IT</header>
<div ng-view class="container"></div>
<footer>
<a href='#/'>首页</a>
<a href='#/list'>列表</a>
<a href="#/detail">详情</a>
<a href="#/demo">演示</a>
</footer>
</body>
</html>
CSS
html,body,h1,h2,h3,h4,h5,h6,ul,dd{padding: 0;margin: 0;}
html{font-size: 62.6%;}
html,body{height: 100%;}
a{text-decoration: none;}
header,footer{box-sizing:border-box;z-index: 9999;}
header{font-size: 2.0rem;text-align: center;border-bottom: 1px solid #ccc;padding: 15px 0;position: absolute;top: 0;left: 0;width: 100%;}
footer{position: absolute;width: 100%;bottom: 0;left: 0;display: -webkit-box;font-size: 1.4rem;border-top: 1px solid #ccc;}
footer a{display: block;-webkit-box-flex: 1;text-align: center;padding: 20px 0;border-right: 1px solid #ccc;}
footer a:last-of-type{border-right: none;}
.container{position: absolute;top:54px;left: 0;bottom: 57px;width: 100%;overflow-y: auto;}
路由：
var myApp = angular.module('myApp',['ngRoute']);
myApp.config(function($routeProvider){
$routeProvider.
when('/',{controller:indexController,templateUrl:'views/index.html'}).
when("/list",{controller:listController,templateUrl:'views/list.html'}).
when("/detail/:id",{controller:detailController,templateUrl:'views/detail.html'}).
when("/demo",{controller:demoController,templateUrl:"views/demoList.html"})
});
控制器：
var cityCode = [{"province":"北京","city":[{"cityName":"北京","code":"101010100"},{"cityName":"朝阳","code":"101010300"},{"cityName":"顺义","code":"101010400"},{"cityName":"怀柔","code":"101010500"},{"cityName":"通州","code":"101010600"},{"cityName":"昌平","code":"101010700"},{"cityName":"延庆","code":"101010800"},{"cityName":"丰台","code":"101010900"},{"cityName":"石景山","code":"101011000"},{"cityName":"大兴","code":"101011100"},{"cityName":"房山","code":"101011200"},{"cityName":"密云","code":"101011300"},{"cityName":"门头沟","code":"101011400"},{"cityName":"平谷","code":"101011500"},{"cityName":"八达岭","code":"101011600"},{"cityName":"佛爷顶","code":"101011700"},{"cityName":"汤河口","code":"101011800"},{"cityName":"密云上甸子","code":"101011900"},{"cityName":"斋堂","code":"101012000"},{"cityName":"霞云岭","code":"101012100"},{"cityName":"北京城区","code":"101012200"},{"cityName":"海淀","code":"101010200"}]}];
function indexController($scope){
var user = {
name:"松鼠闹IT",
age : 24
}
$scope.user = user;
}
function listController($scope){
$scope.cityCode = cityCode;
}
function detailController($scope,$routeParams,$http){
$scope.show=true;
$http({
url:'http://api.36wu.com/Weather/GetWeather?district='+$routeParams.id+'&authkey=eb1983f443d94a78a7925222873a7722',
method:'get',
dataType:'json'
}).success(function(data){
var status = parseInt(data.status,10);
if(status === 200){
$scope.detail = data.data;
$scope.show=false;
}
}).error(function(data){
console.log("从无");
});
}
var demos = [
{title:'translation-transform'},
{title:'1'},
];
function demoController($scope){
$scope.demos = demos;
}
上面的代码如果复制出来的话，啥都不显示，需要你创建一个views文件夹，里面存放“index.html”、“list.html”、“detail.html”、“demo.html”四个页面，四个页面对应的就是底部的四个链接，这四个页面也是四个不同的内容。
说说基本步骤：
1、加载angular.js
2、在模板的html标签里面加上"ng-app"，也可以这样写"ng-app='myApp'"后面的属性值随便写，但是如果写了，就必须在下面这样定义一遍
<script>
var myApp = angular.module("myApp",[]);
</script>
如果不定义的话，就会报错，如果没有属性值，就不需要定义了
3、创建控制器
控制器的单词就是：controller，所以看到这个单词就表示我们看到了控制器。控制器有两种创建方式：
第一种：
<script>
var data = {titie:"松鼠闹IT"};
function myAppController($scope){
$scope.data = data;
}
</script>
<script>
var data = {titie:"松鼠闹IT"};
myApp.controller("myAppController",function($scope){
$scope.data = data;
});
</script>
控制器控制的是哪里呢？
<div ng-controller="myAppController">
<h1>{{data.title}}<h1>
</div>
在一对闭合的标签中加上“ng-controller=’myAppController‘”，在这对闭合标签中的内容以及子元素就受这个控制器管理了。在上面，我们看到了一个很有趣的东西{{data.title}}，恩，看上去很屌的样子，其实一眼我们也可以看出来是啥意思，就是获取data.title的值，那这个值从哪里来呢？这里我们就要简单说说Angular中的另外一个特性：依赖注入，其实我也不懂这个概念
在“myAppController”控制器中，我们看到function中有一个参数$scope，这个参数是干啥的呢？就是来进行数据绑定的。上面"$scope.data = data;"就是将上面的data对象赋值给$scope上的data属性，当然这个data属性是我们自定义的。然后在angular会在模板中找到定义了"myAppController"的闭合标签，在这对闭合标签中产生一个上下文，在这个上下文中，获取到的就是data属性，我们就可以获取到data.title的值了。这一段写的有点扯
Angular基础开始的更多相关文章
- 第214天:Angular 基础概念
一.Angular 简介 1. 什么是 AngularJS - 一款非常优秀的前端高级 JS 框架 - 最早由 Misko Hevery 等人创建 - 2009 年被 Google 公式收购,用于其多 ...
- Angular基础---->AngularJS的使用(一)
AngularJS主要用于构建单页面的Web应用.它通过增加开发人员和常见Web应用开发任务之间的抽象级别,使构建交互式的现代Web应用变得更加简单.今天,我们就开始Angular环境的搭建和第一个实 ...
- angular 基础练习
<!DOCTYPE HTML> <html> <head> <title> 测试页 </title> <meta charset=&q ...
- Angular基础(三) TypeScript
一.模仿Reddit a) 运行ng new –ng4angular-reddit创建应用,从随书代码中复制样式文件,新建组件app-root,代码为: 界面可以看到了: b) 对于界面输入的数据,获 ...
- Angular基础(二) 组件的使用
一.简单操作 a) 使用Angular CLI可以快速创建项目框架,先运行 $ npm install –g @angular/cli@1.0.0安装CLI,为CLI的位置设置环境变量,然后就可以 ...
- angular基础入门
第一章 AngularJs入门 AngularJS是一款由Google公司开发维护的前端框架,其克服了HTML在构建应用上的诸多不足,从而降低了开发成本提升了开发效率. 1 特点 AngularJS与 ...
- Angular 基础入门
简介 什么是AngularJS 一个功能非常完备的前端框架,通过增强HTML的方式提供一种便捷开发Web应用程序的方式 其核心特点就是几乎无任何DOM操作,让开发人员的精力和时间全部集中于业务 MVC ...
- Angular基础教程：表达式日期格式化[转]
本地化日期格式化: ({{ today | date:'medium' }})Nov 24, 2015 2:19:24 PM ({{ today | date:'short' }})11/24/15 ...
- Angular基础知识
AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 ng-directives 扩展了 HTML. ...
- Angular基础（二）
双向数据 利用angular把input框里面的值和h3的值绑定在一起.在input里输入内容,内容会在h3标签里显示出来. 具体效果请看下面代码: <!DOCTYPE html> ...
随机推荐
- JWT能够干什么，不应该干什么？
http://cryto.net/~joepie91/blog/2016/06/13/stop-using-jwt-for-sessions/ At the start of this article ...
- Paxos可容错的一致性协议
一致性问题要求多个process对一个值达成一致.基于消息传递的分布式系统中,在不考虑消息篡改等拜占庭错误的情况下,Paxos可以解决在进程退出,消息延迟,丢失,重复等异常发生的环境中对某个值达成一致 ...
- MVC 实现自定义404错误页
直接进入正题. 在HomeController中有一个NotFound的Action方法. public ActionResult NotFound() { return View(); } 对应的视 ...
- ASP.NET MVC实现通用设置
网站中的设置实现方式有好几种,其中有将设置类序列化然后保存到文件中(例如使用XML序列化然后以XML形式保存在文件中),或者将设置信息保存到数据库中. 保存到数据库中的方式就是将设置的项作为key,设 ...
- [翻译] CRPixellatedView-用CIPixellate滤镜动态渲染UIView
CRPixellatedView-用CIPixellate滤镜动态渲染UIView https://github.com/chroman/CRPixellatedView 本人测试的效果: Usage ...
- UINavigationController便于pop的category
UINavigationController便于pop的category 效果图: 这个category是为了方便UINavigationController用于跳转到指定的控制器当中,用于跳级,如果 ...
- 利用Jquey.hover来实现 鼠标移入出现删除按钮，鼠标移出删除消失
Html代码 <div class="box"><div class="bmbox" onclick="$('.box:first' ...
- java一个字符串中出现次数最多的字符以及次数
学习了别人的方法,觉得挺巧妙的.就是每次取出字符串的第一个字符,将字符串中与第一个字符相同的字符全部删除掉,然后通过计算删除前后字符串的长度来确定该字符在字符串中出现的次数,最终比较出出现最多次的字符 ...
- C 六学家的困惑 【YY】 （2019年华南理工大学程序设计竞赛（春季赛））
冲鸭,去刷题:https://ac.nowcoder.com/acm/contest/625/C 小六喜欢两全其美的事情,今天就正好有一个这样的机会. 小六面前有两根管子,管子里面放满了数字为1到9的 ...
- 理解Flux架构
本文摘自<Flux架构入门教程>和<谈一谈我对 React Flux 架构的理解>.也有自己的观点和总结.转载请注明出处. 一.Flux架构描述 1. Flux是什么 Flux ...