如何用Angular写界面
1个回答
展开全部
在 HTML 就像卜斗戚引入普通的 JS 一样引入 AngularJs 。同时，定义好应用的名称，以及视图的位置（这里可能得有 AngularJs 的基础）。
<!doctype html>
<-- //定义好 ng-app 作为应用的名称 -->
<html ng-app="RemoteCamera">
<head>
<meta charset="utf-8">
<title>Remote Camera</title>
<script type="text/javascript">
// 用于登录状态的标识
connected = {{alreadyLogged}};
</script>
<-- //AngularJs 的引入 -->
<script src="script/angular.min.js"></script>
<script src="script/angular-resource.min.js"></script>
<script src="script/camera.js"></script>
</head>
<-- //定义好 ng-view -->
<body ng-view>
<-- //这里是 viewer 代码 -->
</body>
</html>
每一个 Viwer 都会在 Camera.js 中对应一个 Controller 来渲染，所以有两部分，第一部分是 HTML 中的模板：
<-- //login view -->
<script type="text/ng-template" id="loginView">
<div class="container" ng-controller="loginCtrl" >
//这里是具体的HTML代码
</div>
</script>
<-- //camera view -->
<script type="text/ng-template" id="cameraView">
<div class="container" ng-controller="cameraCtrl" >
//这里是具体的HTML代码
</div>
</script>
<-- //photos view -->
<script type="text/ng-template" id="photosView">
<div class="container" ng-controller="photosCtrl" >
//这里是具体的HTML代码
</div>
</script>型陵
另外一部分，则是使用了 AngularJs 中的 $routeProvider 来进行路由跳转，这样就能控制访问的 URL 与对应的 View 正确显示:
/**
* @路由把 HTML 中的 View 和 AngularJs 中的 Controller 对应起来
* @当访问「/」的时候，就会显示「登录（login）」
* @登录成功则跳转到「菜单（menu）」
* @访问非定义的内容，也会跳到「/」
*/
var remoteCamera = angular.module('RemoteCamera',['ngResource'])
.config(function($routeProvider) {
$routeProvider.when("/", {
controller: remoteCamera.loginCtrl,
template: document.getElementById('loginView'销旦).text
}).when("/menu", {
controller: remoteCamera.menuCtrl,
template: document.getElementById('menuView').text
}).when("/camera", {
controller: remoteCamera.cameraCtrl,
template: document.getElementById('cameraView').text
}).when("/photos", {
controller: remoteCamera.watchPhotosCtrl,
template: document.getElementById('photosView').text
}).otherwise({
redirectTo: "/"
})
});
四、AngularJs 中的 Controller 应用
在 View 中我们能看到对 Controller 这样的 ng-controller=loginCtrl 的定义，它将与 JS 中对应的 Controller 进行捆绑，数据间是双向绑定，同时作用于整个 DOM 结构。
而我们在 Controller 中，可以传递参数、可以和服务端进行交互、可以进行前端交互。那么，一个普通的 Controller 如下：
/**
* @定义登录的controller
*/
remoteCamera.controller('loginCtrl', function($scope, $resource, $location) {
//路由跳转，如果已经登录了，就调到「menu」
if(connected) {
return $location.path("/menu");
}
//定义的函数
$scope.doLogin = function() {
//与服务端的交互
$resource('/api/login').save({
//数据传递到服务器
}, function(data) {
//成功返回
console.log(data)
}, function() {
//错误返回
//与view的交互
$scope.errorMsg = 'Error';
});
};
})
总觉得还缺少点什么来的，还是直接看源代码吧， Camera.js 。
五、完善你的 WebApp
在 Remote Camera 中使用 AngularJs 来完成一个 WebApp，其实没多少代码和工作量。但要使它变成一个 WebApp，还需要完善一些细节。这里主要以 iOS 为例子。
接下来是为你的 WebApp 添加全屏、图标和初始界面：
<-- //加入响应式布局 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<-- //设置safari的属性 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Remote Camera" />
<-- //设置桌面图标 -->
<link rel="apple-touch-icon-precomposed" href="/images/54.jpg">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/images/72.jpg">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/images/114.jpg">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/images/144.jpg">
<-- //设置初始界面 -->
<link rel="apple-touch-startup-image" href="/images/start.jpg" />
<link rel="apple-touch-startup-image" href="/images/start.jpg" media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" />
六、遇到的问题
由于 HTML 页面是由 NodeJs 的 Swig 模板渲染出来，而 Swig 的参数语法又和 AngularJs 的语法一样，所以导致参数不能正常替换掉。于是，需要通过修改 AngularJs 的字符匹配来解决：
var myApp = angular.module('myApp', [], function ($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
<!doctype html>
<-- //定义好 ng-app 作为应用的名称 -->
<html ng-app="RemoteCamera">
<head>
<meta charset="utf-8">
<title>Remote Camera</title>
<script type="text/javascript">
// 用于登录状态的标识
connected = {{alreadyLogged}};
</script>
<-- //AngularJs 的引入 -->
<script src="script/angular.min.js"></script>
<script src="script/angular-resource.min.js"></script>
<script src="script/camera.js"></script>
</head>
<-- //定义好 ng-view -->
<body ng-view>
<-- //这里是 viewer 代码 -->
</body>
</html>
每一个 Viwer 都会在 Camera.js 中对应一个 Controller 来渲染，所以有两部分，第一部分是 HTML 中的模板：
<-- //login view -->
<script type="text/ng-template" id="loginView">
<div class="container" ng-controller="loginCtrl" >
//这里是具体的HTML代码
</div>
</script>
<-- //camera view -->
<script type="text/ng-template" id="cameraView">
<div class="container" ng-controller="cameraCtrl" >
//这里是具体的HTML代码
</div>
</script>
<-- //photos view -->
<script type="text/ng-template" id="photosView">
<div class="container" ng-controller="photosCtrl" >
//这里是具体的HTML代码
</div>
</script>型陵
另外一部分，则是使用了 AngularJs 中的 $routeProvider 来进行路由跳转，这样就能控制访问的 URL 与对应的 View 正确显示:
/**
* @路由把 HTML 中的 View 和 AngularJs 中的 Controller 对应起来
* @当访问「/」的时候，就会显示「登录（login）」
* @登录成功则跳转到「菜单（menu）」
* @访问非定义的内容，也会跳到「/」
*/
var remoteCamera = angular.module('RemoteCamera',['ngResource'])
.config(function($routeProvider) {
$routeProvider.when("/", {
controller: remoteCamera.loginCtrl,
template: document.getElementById('loginView'销旦).text
}).when("/menu", {
controller: remoteCamera.menuCtrl,
template: document.getElementById('menuView').text
}).when("/camera", {
controller: remoteCamera.cameraCtrl,
template: document.getElementById('cameraView').text
}).when("/photos", {
controller: remoteCamera.watchPhotosCtrl,
template: document.getElementById('photosView').text
}).otherwise({
redirectTo: "/"
})
});
四、AngularJs 中的 Controller 应用
在 View 中我们能看到对 Controller 这样的 ng-controller=loginCtrl 的定义，它将与 JS 中对应的 Controller 进行捆绑，数据间是双向绑定，同时作用于整个 DOM 结构。
而我们在 Controller 中，可以传递参数、可以和服务端进行交互、可以进行前端交互。那么，一个普通的 Controller 如下：
/**
* @定义登录的controller
*/
remoteCamera.controller('loginCtrl', function($scope, $resource, $location) {
//路由跳转，如果已经登录了，就调到「menu」
if(connected) {
return $location.path("/menu");
}
//定义的函数
$scope.doLogin = function() {
//与服务端的交互
$resource('/api/login').save({
//数据传递到服务器
}, function(data) {
//成功返回
console.log(data)
}, function() {
//错误返回
//与view的交互
$scope.errorMsg = 'Error';
});
};
})
总觉得还缺少点什么来的，还是直接看源代码吧， Camera.js 。
五、完善你的 WebApp
在 Remote Camera 中使用 AngularJs 来完成一个 WebApp，其实没多少代码和工作量。但要使它变成一个 WebApp，还需要完善一些细节。这里主要以 iOS 为例子。
接下来是为你的 WebApp 添加全屏、图标和初始界面：
<-- //加入响应式布局 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<-- //设置safari的属性 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Remote Camera" />
<-- //设置桌面图标 -->
<link rel="apple-touch-icon-precomposed" href="/images/54.jpg">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/images/72.jpg">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/images/114.jpg">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/images/144.jpg">
<-- //设置初始界面 -->
<link rel="apple-touch-startup-image" href="/images/start.jpg" />
<link rel="apple-touch-startup-image" href="/images/start.jpg" media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" />
六、遇到的问题
由于 HTML 页面是由 NodeJs 的 Swig 模板渲染出来，而 Swig 的参数语法又和 AngularJs 的语法一样，所以导致参数不能正常替换掉。于是，需要通过修改 AngularJs 的字符匹配来解决：
var myApp = angular.module('myApp', [], function ($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
