我创建了一个带角度js的简单单页面应用程序。我有一个索引页面,其中定义了路由并调用了ng-view。
的Index.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="SPA.Views.index" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="app">
<head runat="server">
<title>SPA</title>
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
</head>
<body data-ng-controller="Index as ind">
<form id="form1" runat="server">
<!-- HEADER AND NAVBAR -->
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Angular Routing Example</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="" data-ng-click="openDashboard()"><i class="fa fa-home"></i> Dashboard</a></li>
<li><a href="" data-ng-click="openAbout()"><i class="fa fa-shield"></i> About</a></li>
<li><a href="" data-ng-click="openContact()"><i class="fa fa-comment"></i> Contact</a></li>
</ul>
</div>
</nav>
</header>
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>
</div>
</form>
<!-- load angular and angular route via CDN -->
<%--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>--%>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="../Controllers/app.js"></script>
</body>
</html>
App.js:
var app = angular.module('app', ['ngRoute']);
// configure our routes
app.constant('routes', [
{
url: '/',
config: {
templateUrl: 'dashboard.aspx',
menuItem: 'MainPage'
}
},
{
url: '/about',
config: {
templateUrl: 'about.aspx',
menuItem: 'aboutPage'
}
},
{
url: '/contact',
config: {
templateUrl: 'contact.aspx',
menuItem: 'contactPage'
}
}
]);
app.config(['$routeProvider', 'routes', '$controllerProvider', function ($routeProvider, routes, $controllerProvider) {
//$controllerProvider.allowGlobals();
app._controller = app.controller;
// Provider-based controller.
app.controller = function (name, constructor) {
$controllerProvider.register(name, constructor);
return (this);
};
routes.forEach(function (route) {
$routeProvider.when(route.url, route.config);
});
}]);
var controllerId = 'Index';
app.controller(controllerId, function ($scope, $location) {
var ind = this;
$scope.openDashboard = function () {
$location.path('/');
}
$scope.openOpportunity = function () {
$location.path('/opportunity');
}
$scope.openContact = function () {
$location.path('/contact');
}
})
我为每个菜单和单独的.js文件创建了三个单独的aspx页面(在每个页面中定义了控制器)。
当页面加载时,它默认调用仪表板页面,它会抛出错误
错误:[ng:areq] http://errors.angularjs.org/1.3.0-beta.17/ng/areq?p0=dashboardController&p1=not%20a%20function%2C%20got%20undefined
此处,dashboardController
是仪表板页面中定义的控制器的名称。
我发现了&#39; dashboard.js&#39;文件未在浏览器中加载。
Dashboard.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="dashboard.aspx.cs" Inherits="SPA.Views.dashboard" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="../Controllers/dashboard.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div data-ng-controller="dashboardController">
{{message}}
</div>
</form>
</body>
</html>
和关联的控制器文件如下(dashboard.js):
(function () {
var app = angular.module('app');
var controllerId = 'dashboardController';
app.controller(controllerId, function ($scope) {
$scope.message = "Hello!!";
});
})();
其他页面也有相同的代码,并且在选择菜单时也会提供上述错误。
当我尝试拨打&#39; dashboard.js&#39;在index.aspx本身的文件中,它正确显示页面(它在浏览器中加载)。
但我不想在开始时调用所有js文件,因为将来我会在每个页面中使用大量数据,因此可能会降低应用程序的速度。
请告诉我,如何在调用该特定页面时调用控制器以及如何在浏览器中加载.js文件来继续获取输出。
提前致谢...
答案 0 :(得分:1)
添加
<script src>
标签内部的内容
答案 1 :(得分:0)
在单页应用中,对于不同的视图,您不需要再次加载html,title,head和body标记,只需要输入您想要查看的html而不是您在索引页面中添加的ALAsset *asset = // your asset
if(asset.editable) {
NSDictionary *metadata = asset.defaultRepresentation.metadata;
NSDictionary *gpsInfo=metadata[@"{GPS}"];
if (gpsInfo) {
NSMutableDictionary *mutableGPSInfo = [gpsInfo mutableCopy];
[mutableGPSInfo setObject:@"yourNewLatitude" forKey:@"Latitude"];
[mutableGPSInfo setObject:@"yourNewLongitude" forKey:@"Longitude"];
NSMutableDictionary *mutableMetadata = [metadata mutableCopy];
[mutableMetadata setObject:[mutableGPSInfo copy] forKey:@"{GPS}"];
ALAssetRepresentation *rep = [asset defaultRepresentation];
Byte *buffer = (Byte*)malloc(rep.size);
NSUInteger buffered = [rep getBytes:buffer fromOffset:0.0 length:rep.size error:nil];
NSData *data = [NSData dataWithBytesNoCopy:buffer length:buffered freeWhenDone:YES];
[asset setImageData:data metadata:[mutableMetadata copy] completionBlock:^(NSURL *assetURL, NSError *error) {
if (error) {
NSLog(@"Error : %@",error);
} else {
NSLog(@"Asset metadata is successfully edited");
}
}];
}
} else {
NSLog(@"oops..! Asset can not be edited");
}
标记。因此,您的信息中心页面应如下所示:
ng-view
所以现在所有的* .js文件都会放在正文的末尾,因为你的所有html模板都会在index.html文件中加载
答案 2 :(得分:0)
<html>
<body>
<!--put all .js files here to see in chrome browser while debugging -->
<script src="abc.js" type="text/javascript"></script>
</body>
</html>