首页 > 代码库 > Angular基础开始
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="http://www.mamicode.com/css/app.css" media="all" /> <script src="http://www.mamicode.com/js/angular.js"></script> <script src="http://www.mamicode.com/js/angular-route.js" type="text/javascript" charset="utf-8"></script> <script src="http://www.mamicode.com/js/app.js"></script> <script src="http://www.mamicode.com/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=http://www.mamicode.com/‘#/‘>首页"#/detail">详情</a> <a href="http://www.mamicode.com/#/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 = http://www.mamicode.com/{titie:"松鼠闹IT"};function myAppController($scope){ $scope.data = http://www.mamicode.com/data;>第二种：
<script>var data = http://www.mamicode.com/{titie:"松鼠闹IT"};myApp.controller("myAppController",function($scope){ $scope.data = http://www.mamicode.com/data;>控制器控制的是哪里呢？
<div ng-controller="myAppController"> <h1>{{data.title}}<h1></div>在一对闭合的标签中加上“ng-controller=’myAppController‘”，在这对闭合标签中的内容以及子元素就受这个控制器管理了。在上面，我们看到了一个很有趣的东西{{data.title}}，恩，看上去很屌的样子，其实一眼我们也可以看出来是啥意思，就是获取data.title的值，那这个值从哪里来呢？这里我们就要简单说说Angular中的另外一个特性：依赖注入，其实我也不懂这个概念
在“myAppController”控制器中，我们看到function中有一个参数$scope，这个参数是干啥的呢？就是来进行数据绑定的。上面"$scope.data = http://www.mamicode.com/data;"就是将上面的data对象赋值给$scope上的data属性，当然这个data属性是我们自定义的。然后在angular会在模板中找到定义了"myAppController"的闭合标签，在这对闭合标签中产生一个上下文，在这个上下文中，获取到的就是data属性，我们就可以获取到data.title的值了。这一段写的有点扯
Angular基础开始
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。