angular+bootstrap+MVC--之一，入门
这篇直奔MVVM主题，本例实现一个bootstrap的下拉框。
展示了如下技术：
1、MVVM绑定(事件绑定，值绑定，循环绑定，循环绑定中嵌套事件并回传item)，
2、angul多module，
建议在webstrom下面运行
1、HTML代码
1 <!doctype html> 2 <!--suppress ALL --> 3 <html ng-app="appTow"> 4 <head> 5 <script src="angular.min.js"></script> 6 <script src="app.js"></script> 7 <script src="./Script/jquery-2.1.1.min.js"></script> 8 <link href="./Content/Plus/bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet"/> 9 <script src="./Content/Plus/bootstrap-3.2.0-dist/js/bootstrap.min.js"></script> 10 <link href="./Skin/Default/css/site.css" rel="stylesheet"/> 11 </head> 12 <body> 13 <div ng-controller="MyController"> 14 Your name: 15 <input type="text" ng-model="username"> 16 <button ng-click='sayHello()'>greet</button> 17 <hr> 18 {{greeting}} 19 </div> 20 <div ng-controller="MyController1"> 21 Your name: 22 <input type="text" ng-model="username"> 23 <button ng-click='sayHello()'>greet</button> 24 <li ng-repeat="x in names"> 25 {{ x.Name}} 26 </li> 27 <table> 28 <tr> 29 <td class="ruyeeTableTDLable"><span>Names</span></td> 30 <td class="ruyeeTableDataCell"> 31 <div class="btn-group"> 32 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" 33 aria-expanded="false"> 34 <span>{{selectedItem}}</span><span class="caret"></span> 35 </button> 36 <ul class="dropdown-menu" role="menu"> 37 <li ng-repeat="x in names"> 38 <a href="#" ng-click="clickOneLi(x.Name)">{{ x.Name}}</a> 39 </li> 40 </ul> 41 </div> 42 </td> 43 </tr> 44 </table> 45 </div> 46 </body> 47 </html>
2、JS代码（app.js）
angular.module('appOne', [])
.controller('MyController',
function ($scope) {
$scope.username = 'World';
$scope.sayHello = function () {
$scope.greeting = 'Hello ' + $scope.username + '!';
};
});
angular.module('appTow', ['appOne'])
.controller('MyController1',
function ($scope, $http) {
$scope.username = 'World002';
$scope.sayHello = function () {
$http.get("Data.json")
.success(function (response) {
$scope.names = response;
});
};
$scope.clickOneLi = function (item) {
$scope.selectedItem = item;
}
$scope.selectedItem = "Please select one";
});
var app = angular.module('myApp', []);
app.controller('customersCtrl', function ($scope, $http) {
$http.get("Data.json")
.success(function (response) {
$scope.names = response;
});
});
3、Json文件(Data.json)
1 [ 2 { 3 "Name" : "Alfreds Futterkiste", 4 "City" : "Berlin", 5 "Country" : "Germany" 6 }, 7 { 8 "Name" : "Berglunds snabbk?p", 9 "City" : "Lule?", 10 "Country" : "Sweden" 11 }, 12 { 13 "Name" : "Centro comercial Moctezuma", 14 "City" : "México D.F.", 15 "Country" : "Mexico" 16 }, 17 { 18 "Name" : "Ernst Handel", 19 "City" : "Graz", 20 "Country" : "Austria" 21 }, 22 { 23 "Name" : "FISSA Fabrica Inter. Salchichas S.A.", 24 "City" : "Madrid", 25 "Country" : "Spain" 26 }, 27 { 28 "Name" : "Galería del gastrónomo", 29 "City" : "Barcelona", 30 "Country" : "Spain" 31 }, 32 { 33 "Name" : "Island Trading", 34 "City" : "Cowes", 35 "Country" : "UK" 36 }, 37 { 38 "Name" : "K?niglich Essen", 39 "City" : "Brandenburg", 40 "Country" : "Germany" 41 }, 42 { 43 "Name" : "Laughing Bacchus Wine Cellars", 44 "City" : "Vancouver", 45 "Country" : "Canada" 46 }, 47 { 48 "Name" : "Magazzini Alimentari Riuniti", 49 "City" : "Bergamo", 50 "Country" : "Italy" 51 }, 52 { 53 "Name" : "North/South", 54 "City" : "London", 55 "Country" : "UK" 56 }, 57 { 58 "Name" : "Paris spécialités", 59 "City" : "Paris", 60 "Country" : "France" 61 }, 62 { 63 "Name" : "Rattlesnake Canyon Grocery", 64 "City" : "Albuquerque", 65 "Country" : "USA" 66 }, 67 { 68 "Name" : "Simons bistro", 69 "City" : "K?benhavn", 70 "Country" : "Denmark" 71 }, 72 { 73 "Name" : "The Big Cheese", 74 "City" : "Portland", 75 "Country" : "USA" 76 }, 77 { 78 "Name" : "Vaffeljernet", 79 "City" : "?rhus", 80 "Country" : "Denmark" 81 }, 82 { 83 "Name" : "Wolski Zajazd", 84 "City" : "Warszawa", 85 "Country" : "Poland" 86 } 87 ]