2016.6.4
学习文献：
你的第一个AngularJS应用：https://segmentfault.com/a/1190000000347412
AngularJS 提交表单的方式：http://www.oschina.net/translate/submitting-ajax-forms-the-angularjs-way
AngularJS中$http服务的简单用法:http://www.2cto.com/kf/201506/405137.html
代码由3块实现：
1.Ui
mvc5的解释就是定义项目，定义模块，定义基本视图
<body ng-app='routingDemoApp'><div class="container"><div class="row"><h1 class="text-center">angular 单页新闻发布系统</h1></div><div class="row"><div class="col-md-2"><ul class=""><li><a href="#/put">发布</a></li><li><a href="#/list">新闻列表</a></li></ul></div><div class="col-md-10" ng-view></div></div></div></body>
2.AnjularJs的功能实现
<script>//配置路由器，绑定视图和控制器，细节看上面引用链接var app = angular.module('routingDemoApp', ['ngRoute']);app.config(['$routeProvider', function ($routeProvider) {$routeProvider.when('/', {templateUrl: 'list.html',controller: 'ListController'}).when('/list', {templateUrl: 'list.html',controller: 'ListController'}).when('/edit/:id', {templateUrl: 'edit.html',controller: 'EditController'}).when('/del/:id', {controller: 'DelController',templateUrl: 'del.html',}).when('/detail/:id', {templateUrl: 'detail.html',controller: 'DetailController'}).when('/put', {templateUrl: 'put.html',controller: 'PutController'}).otherwise({ redirectTo: '/' });}]);//写控制器功能app.controller("ListController", function ($scope, $http) {$http.get("/AngularJS/data.ashx?action=getall").success(function (data) {$scope.models = data.models;})});app.controller("PutController", function ($scope, $http) {$scope.addcontent = function () {//这种写法很差，建议看下面EditController控制器里面用对象来写值var data = "title=" + $scope.title + "&author=" + $scope.author + "&content=" + $scope.content;$http.get("/AngularJS/data.ashx?action=add&" + data).success(function (data ) {if (data == 1 && confirm("发布成功是否跳转")) location.href = "";});}});app.controller("EditController", function ($scope, $http, $routeParams) {$scope.updata = function () {//nnd，Jq用的 ("form").serialize(),只能拼接了；想用$http.get(url,congfig)的，但是值传不过去。。。$scope.model.action = "up";$http({ method: "get", url: "/AngularJS/data.ashx", params: $scope.model }).success(function (data) {if (data != 1) return false;location.href = "";});};$http.get("/AngularJS/data.ashx?action=get&id=" + $routeParams.id).success(function (data) {$scope.model = data;}).error(function () {alert("error");$scope.formData = {};});});app.controller("DelController", function ($scope, $http, $routeParams) {$http.get("/AngularJS/data.ashx?action=del&id=" + $routeParams.id).success(function (data) {if (data != 1) return false;window.location.href("./");}).error(function (data) {alert("error");})});app.controller("DetailController", function ($scope, $http, $routeParams) {$http.get("/AngularJS/data.ashx?action=get&id=" + $routeParams.id).success(function (data) {$scope.model = data;}).error(function () {alert("失败");})$scope.updata = function () {$http.get("/AngularJS/data.ashx?action=up")}});</script>
3.视图模板
<script type="text/ng-template" id="put.html"><form class="form-horizontal"><div class="form-group"><label>标题</label><input type="text" class="form-control" ng-model="title" /></div><div class="form-group"><label>作者</label><input type="text" class="form-control" ng-model="author" /></div><div class="form-group"><label>内容</label><textarea type="text" class="form-control" ng-model="content"> </textarea></div><div class="form-group"><input type="button" class="btn btn-success form-control" value="提交" ng-click="addcontent()"/></div></form></script><script type="text/ng-template" id="list.html"><div class="row" ><table class="table"><thead><tr><th>编号</th><th>标题</th><th>时间</th><th>管理</th></tr></thead><tbody ng-repeat="x in models"><tr><td>{{ $index+1 }}</td><td><a href="#/detail/{{x.Id}}"> {{ x.title }}</a></td><td>{{ x.time }}</td><td><a href="#/edit/{{x.Id}}">编辑</a>|<a href="#/del/{{x.Id}}">删除</a></td></tr></tbody></table></div></script><script type="text/ng-template" id="edit.html"><form class="form-horizontal"><input type="hidden" ng-model="model.Id"/><div class="form-group"><label>标题</label><input type="text" class="form-control" ng-model="model.title" /></div><div class="form-group"><label>作者</label><input type="text" class="form-control" ng-model="model.author" /></div><div class="form-group"><label>内容</label><textarea type="text" class="form-control" ng-model="model.content"> </textarea></div><div class="form-group"><input type="button" class="btn btn-success form-control" value="修改" ng-click="updata()"/></div></form></script><script type="text/ng-template" id="detail.html"><h1 class="text-center">{{ model.title }}</h1><span class="text-center">作者：{{ model.author }},时间:{{ model.time }}</span><div>{{ model.content }}</div></script><script type="text/ng-template" id="del.html"></script>
开发遇到以下几个问题：
1.Post提交的data数据是什么格式了？
JQ:$.post("url",data"")
Ang:$http.Post(data:"",params:"")
2.$scope.model获取前台传来的Json的取值问题
$http.get(url).success(function(data){
$scope.model = data;
})
json为集合：{"obj":[{id:1,name:"zzj"},{id:1,name:"zzj"}]},使用就是:$scope.model.obj[0].id,$scope.model.obj[0].name
json为对象：{id:1,name:"zzj"},使用的时候就是 $scope.model.id, $scope.model.name
3.路由器配置问题
http://www.runoob.com/angularjs/angularjs-routing.html
4.json转obj,string的细节（json检验网：http://www.bejson.com/）
json有2种：对象、集合
对象：{key:value,key:value}
集合:{object:[{key:value},{key:value}]}
格式之间的互转：
在Firefox，chrome，opera，safari，ie9，ie8等高级浏览器直接可以用JSON对象的stringify()和parse()方法。
JSON.stringify(obj)将JSON转为字符串。
JSON.parse(string)将字符串转为JSON格式；
Angular.fromJson( data );
Angular.toJson(data);
