我试图包含多个部分模板以包含在一个ng-view,但routeProvider指令总是试图从服务器(而不是嵌入式ng-template)获取文件.
我的HTML中定义了以下内容:
<script type="text/ng-template" id="groupList.html">
<!-- contents -->
</script>
<script type="text/ng-template" id="participantList.html">
<!-- contents -->
</script>
<script src="js/app.js"></script> <!-- AngularJS app file -->
在我的app.js文件中,我有以下内容:
var myApp = angular.module('myApp', ['ngResource', '$strap.directives']);
// Update interpolateProvider for Django server
myApp.config(function ($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
myApp.config(function ($routeProvider)
{
$routeProvider.when('/', {
templateUrl: '../static/views/home.html'
});
$routeProvider.when('/group', {
controller: 'GroupCheckInCtrl',
templateUrl: 'groupList.html'
});
$routeProvider.when('/group/:groupId', {
controller: 'GroupCheckInCtrl',
templateUrl: 'participantList.html'
});
$routeProvider.otherwise({
redirectTo: '/'
});
});
当我加载页面时,我的浏览器控制台出错:
GET http://127.0.0.1:8000/visitorLog/group/groupList.html …我正在使用angularjs路由,但得到以下错误...
<title>Angular js</title>
</head>
<body><div data-ng-controller="SimpleController">
<div data-ng-view=""></div>
NAme:<input type="text" data-ng-model="name" />{{name}}
<br />
<ul>
<li data-ng-repeat="cust in customers|filter:name|orderBy:'city'">{{cust.name|uppercase}}-{{cust.city|lowercase}}</li>
</ul>
<script>
var demoapp = angular.module('demoapp', ['ngRoute']);
demoapp.config(function($routeprovider){
$routeprovider
.when('/',{
controller:'SimpleController',
templateUrl:'view1.html'
})
.when('/partial2',{
controller:'SimpleController',
templateUrl:'view2.html'
})
.otherwise({redirectTo:'/'});
});
demoapp.controller('SimpleController',
function ($scope) {
$scope.customers = [{ name: 'aman', city: 'boom' },
{ name: 'ajay', city: 'reem dee' },
{ name: 'hood', city: 'meen' }];
});
</script>
</div>
</body>
</html>
控制台上的错误
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.12/$injector/modulerr?p0=demoapp&p1=Error%3…0Yb%20(http%3A%2F%2Flocalhost%3A4257%2Fscripts%2Fangular.min.js%3A32%3A232)
我有一个基本的需求,我想用路线来解决:
我的问题是,第一次显示Web应用程序时,用户似乎被正确重定向,因为URI是正确的,但不是显示的视图(它对应于默认视图).
我已经为此创建了一个jsbin,如果你更愿意看到它是真的.该结果可以在这里看到.
重现步骤:
needsAuth即使URI包含登录(对应于视图login),也会显示视图的内容loginHTML代码:
<!DOCTYPE html>
<html ng-app='app'>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-route.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div ng-view>
</div>
</body>
</html>
这是javascript代码:
var template = '{{vm.text}}';
angular
.module('app', ['ngRoute'])
.config(['$routeProvider', routes])
.controller('needsAuthController', needsAuthController)
.controller('loginController', loginController)
.run(['$rootScope', '$location', registerRedirection]);
function routes($routeProvider){
$routeProvider
.when('/needsAuth', {
controller: 'needsAuthController',
controllerAs: 'vm',
template: template
})
.when('/login', {
controller: 'loginController', …我遇到了routeProvider.我的链接不断打开新页面,而不是在视图中加载模板.
我的代码如下
raceApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'raceApp/createChallenge_view.php',
controller: 'createChallenge'
})
.when('/createchallenge', {
templateUrl: 'raceApp/createChallenge_view.php',
controller: 'createChallenge'
})
.when('/findchallenge', {
templateUrl: 'raceApp/findChallenge_view.php',
//controller: 'findChallenge'
})
.otherwise({
redirectTo: '/'
});
}]);
我的HTML看起来像
<base href="/runkinlocal/wp-content/themes/wordpress-bootstrap-master/" />
<a class="menu-item select-runner0" href="#/createChallenge">
<a class="menu-item select-runner0" href="#/findchallenge">
当页面加载时,加载初始模板,但是当我点击其中一个链接时,加载一个新页面而不是在视图中加载模板(该页面看起来像http://test.com:8888/runkinlocal/wp-content/themes/wordpress-bootstrap-master /#/ createChallenge)
我正在使用Wordpress.
我期待着你的帮助!
<head>
<script src=jquery.js></script>
<script src=bootstrap.js></script>
<script src=angular.js></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<link rel=stylesheet type="text/css" href=bootstrap.css />
<link rel=stylesheet type=text/css href=mystyle.css />
<style>
#panel{margin:20px;}
#addNew{margin:10px;}
#pagination{text-align:center;}
span{background:#aaa;width:60px;width:60px;}
</style>
</head>
<body ng-app="myApp">
<div ng-controller=myController>
<div id=panel class="panel panel-primary">
<div class="panel-heading">Hero Selection Bar</div>
<div class="panel-body">
<a href="#/one">Page 1</a>
<a href="#/two">Page 2</a>
<a href="#/three">Page 3</a>
<ng-view > </ng-view>
</div>
</div>
</div>
<script>
var app = angular.module('myApp',['ngRoute']);
app.controller('myController', function( $scope, $routeProvider){
$scope.somedata = "THAT";
});
app.config([$routeProvider],function($routeProvider){
$routeProvider
.when('#/one', {templateUrl:"templates/one.html"})
.when('#/two', {templateUrl:"templates/two.html"})
.when('#/three', {templateUrl:"templates/three.html"})
});
</script>
</body>
我将文件保存在'templates …
我正在编写一些简单的代码来练习角度路由。我有一个 index.html 文件，其中包含用于访问相应模板的链接和用于显示模板的 div 元素。然而，当单击链接时，模板不会显示，并且 URL 也不会按预期显示。
url 显示为： http://localhost/angproj/#!#%2Fhome 而不是预期的http://localhost/angproj#/home
这是代码：
索引.html
<!DOCTYPE html>
<html ng-app = "myModule">
<head>
<title>Home</title>
<link rel="stylesheet" href ="styles.css">
<script src="angular/angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="script.js"></script>
<meta name="vieport" content="width=device-width initial scale=1">
</head>
<body>
<header><h2>Website Header</h2></header>
<div class="column">
<div class="links">
<a href="#/home">Home</a><br>
<a href="#/services">Our services</a><br>
<a href="#/technologies">Technologies</a><br>
</div>
</div>
<div class="content" ng-view></div>
<footer><h3>Website footer</h3></footer>
</body>
</html>
脚本文件
var myApp = angular
.module("myModule",["ngRoute"])
.config(function($routeProvider){
$routeProvider
.when("/home",{
template:"About Us"
})
.when("/services",{
template:"Our Services"
})
.when("/technologies",{
template:"Our Technologies" …在我的AngularJS应用程序中,route当用户未登录时,我将重定向到特定页面.要做到这一点,我正在使用变量$rootScope.
现在我想在用户登录时阻止浏览器的后退按钮.我想将其重定向到特定页面(registration视图).问题是我不知道是否有后退按钮事件.
我的代码是:
angular.module('myApp',[...]
//Route configurations
}])
.run(function($rootScope, $location){
$rootScope.$on('$routeChangeStart', function(event, next, current){
if(!$rootScope.loggedUser) {
$location.path('/register');
}
});
$rootScope.$on('$locationChangeStart', function(event, next, current){
console.log("Current: " + current);
console.log("Next: " + next);
});
});
所以在$locationChangeStart我写一个伪代码,如:
if (event == backButton){
$location.path('/register');
}
可能吗？
一个天真的解决方案是编写一个函数,检查是否next和current错误的顺序,检测用户是否回去.
还有其他解决方案吗？我正以错误的方式解决问题？
我正试图通过django整理一个基本的angularjs网页(但在这个例子中并没有真正使用django).我试图完全复制一个例子,但它不起作用.部分和控制器未加载.网址已更新,因此我知道应用正在加载.但我看不到它部分或数据完全打击我的网络服务器.帮助将不胜感激.
这是我可以放在一起的最简单的代码.
的test.html:
<!doctype html>
<html ng-app="ciqApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-route.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers.js"></script>
</head>
<body>
TEST
<div ng-view>
</div>
</body>
</html>
JS/app.js
var ciqApp = angular.module('ciqApp', [
'ngRoute',
'ciqControllers'
]);
ciqApp.config(['$routeProvider',
function($routeProvider){
$routeProvider.
when('/questions', {
templateURL: '/static/partials/question-list.html',
controller: 'QuestionListCtrl'
}).
otherwise({
redirectTo: '/questions'
});
}]);
JS/controllers.js
var ciqControllers = angular.module('ciqControllers', []);
ciqControllers.controller('QuestionListCtrl', ['$scope', '$http',
function ($scope, $http) {
$http.get('/get_questions').success(function(data) {
$scope.questions = data;
});
}]);
我的AngularJS中有一个$ routeProvider,它提供了templateUrl和controller,
我想知道是否可以在控制器内制作temlateUrl.
原因是我的代码部分异步,这将减轻复杂性.
我有一个AngularJS单页面应用程序,其中有很多HTML块,我根据他们的权限级别向用户显示.
用户权限由service呼叫确定,并且基于权限设置值.
$scope.permission = 'admin'
我可以使用ng-hide/show指令根据权限隐藏这些块.但我担心安全问题.通过更改css display属性,未经授权的人也可以查看这些块.
另一种选择是ng-if,我目前正在使用它.但我想知道我是否应该这样做routing,我相信这更安全.我可以使用ui.router角度模块来实现这一点.但是正确的方法是什么？
我应该使用ng-hide/show,ng-if还是routing？
期待一些好的想法.
任何帮助是极大的赞赏.提前致谢.
我有一个问题,当我编辑数据时,我的网址没有显示id示例:/answer/1 or /answer/2 or /answer/3等我很困惑,因为我使用UI ROUTER
我是初学者使用UI ROUTER angularjs.你能帮助我吗 ？我该怎么办 ？谢谢
我的路由代码:
.state({
name: 'answer',
url : '/answer/',
params : {
obj : null
},
controller: 'answer-controller',
templateUrl: 'templates/table-answer.html'
})
ng-click转到表格答案:
<button type="button" class="btn btn-default" ng-click="ListAnswer(data.item)"><i class="fa fa-eye"></i> View Answer</button>
将params $ scope.ListAnswer传递给answer-controller.js
$scope.ListAnswer = function(data) {
$state.go('answer', {obj : data});
};
angularjs angularjs-scope angularjs-routing angular-ui-router
我将尝试将材料设计与角度js中的路由集成,但CSS设计不起作用.如果我将使用bootstrap CSS检查它,它正在工作.
如果我会尝试这种方式,它会给我一些错误
var scotchApp = angular.module('scotchApp', ['ngMaterial']);
错误
未捕获的错误:[$注射器:modulerr] http://errors.angularjs.org/1.2.25/ $喷油器/ modulerr P0 = scotchApp&P1 =错误... gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular？ min.js%3A18%3A170)
App.JS
// create the module and name it scotchApp
// also include ngRoute for all our routing needs
// var scotchApp = angular.module('scotchApp', ['ngMaterial']); -- Not Working
var scotchApp = angular.module('scotchApp', ['ngRoute']);
// configure our routes
scotchApp.config(function ($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl: 'pages/home.html',
controller: 'mainController'
})
// route for the about page
.when('/about', …