AngularJS-常用服务

页面导航:首页 > 网络编程 > JavaScript > AngularJS-常用服务

AngularJS-常用服务

来源: 作者: 时间:2016-02-02 09:58 【

Angular 内置了很多服务,例如$location服务,用来和浏览器的地址栏进行交互;$root服务,用来根据URL地址的变换切换视图;还有$http服务,用来和服务器进行交互。 $routeProvider使用 $route

Angular 内置了很多服务,例如$location服务,用来和的地址栏进行交互;$root服务,用来根据URL地址的变换切换视图;还有$http服务,用来和服务器进行交互。

$routeProvider

使用 $routeProvider绑定路由与视图。

我们可以利用路由服务定义这样一种东西:对于浏览器所指向的特定URL,Angular将会加载并显示一个模板,并实例化一个控制器来为模板提供内容。

 

切换视图的原理:Angular发起下图的请求:

\

XHR:SmlHttpRequest,本质是Ajax。

 

$http

$http.get(url) : get方式获取url返回。


得到的JSON数据


城市 国家
{{ x.Name }} {{ x.City}} {{ x.Country }}
<script> function customersController($scope,$http) { $http.get("http://www.w3cschool.cc/try/angularjs/data/Customers_JSON.php")//这个http请求会拿到纯文本返回,里面是json内容。 .success(function(response) {$scope.names = response;});//response就是json格式的数据,相当于把json反序列化为了js对象。 } </script> <script src="http://apps.bdimg.com/libs/angular.js/1.2.15/angular.min.js"></script>

$http拿到的json内容见下:

 

[ { "Name" : "Alfreds Futterkiste", "City" : "Berlin", "Country" : "Germany" }, { "Name" : "Berglunds snabbköp", "City" : "Luleå", "Country" : "Sweden" }, { "Name" : "Centro comercial Moctezuma", "City" : "México D.F.", "Country" : "Mexico" }, { "Name" : "Ernst Handel", "City" : "Graz", "Country" : "Austria" }, { "Name" : "FISSA Fabrica Inter. Salchichas S.A.", "City" : "Madrid", "Country" : "Spain" }, { "Name" : "Galería del gastrónomo", "City" : "Barcelona", "Country" : "Spain" }, { "Name" : "Island Trading", "City" : "Cowes", "Country" : "UK" }, { "Name" : "Königlich Essen", "City" : "Brandenburg", "Country" : "Germany" }, { "Name" : "Laughing Bacchus Wine Cellars", "City" : "Vancouver", "Country" : "Canada" }, { "Name" : "Magazzini Alimentari Riuniti", "City" : "Bergamo", "Country" : "Italy" }, { "Name" : "North/South", "City" : "London", "Country" : "UK" }, { "Name" : "Paris spécialités", "City" : "Paris", "Country" : "France" }, { "Name" : "Rattlesnake Canyon Grocery", "City" : "Albuquerque", "Country" : "USA" }, { "Name" : "Simons bistro", "City" : "København", "Country" : "Denmark" }, { "Name" : "The Big Cheese", "City" : "Portland", "Country" : "USA" }, { "Name" : "Vaffeljernet", "City" : "Århus", "Country" : "Denmark" }, { "Name" : "Wolski Zajazd", "City" : "Warszawa", "Country" : "Poland" } ]

网页效果

\


Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<