I'm trying out ui-router for angular. I added this line of code to my app module in my app.js:
angular
.module("ngClassifieds", ['ngMaterial', 'ui.router'])
.config(function($mdThemingProvider, $stateProvider){
$mdThemingProvider.theme('default')
.primaryPalette('teal')
.accentPalette('orange');
$stateProvider
.state('stateone', {
url:'/stateone',
template: '<h1>State one</h1>'
})
.state('statetwo', {
url: '/statetwo',
template: '<h1>State two</h1>'
});
});
On my html I just put an empty ui-view to test whether or not i'm getting those two headers but with no luck:
<ui-view></ui-view>
Testing it out on my localhost link by putting in:
localhost:8080/#/stateone
localhost:8080/#/statetwo
But for some reasons it's not loading/showing any of the headers on any of those links but just showing my page without the headers.
I have already included angular-ui-router.js into my index.html
If anyone could point out what I did wrong, that would great.
In case anyone is wondering : this is the order of my scripts:
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-animate/angular-animate.js"></script>
<script src="node_modules/angular-aria/angular-aria.js"></script>
<script src="node_modules/angular-material/angular-material.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<script src="scripts/app.js"></script>
<script src="components/classifieds.ctr.js"></script>
<script src="components/classifieds.fac.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
Since you did not get any error it is difficult to understand what went wrong but you can have a look at my plunkr and figure it out. I removed angular-material.
https://plnkr.co/edit/WGjzY6flSx5Ces1moSPk?p=preview
<script>
angular
.module("ngClassifieds", ['ui.router'])
.config(function( $stateProvider){
$stateProvider
.state('stateone', {
url:'/stateone',
template: '<h1>State one</h1>'
})
.state('statetwo', {
url: '/statetwo',
template: '<h1>State two</h1>'
});
});
</script>
</head>
<body>
<h1>Hello Plunker!</h1>
Link1
Link2
<ui-view></ui-view>
</body>
Related
I have an application that uses a Router to load pages across a shared template, and other pages that are organized by Controllers, Services, and templates that run within the context of those controllers. It's a simple process to get the various entries of the Controllers and application to run within the same context, but when I have a set of ngRoute defined rules in place, the router stops working.
The routes I have in place are set in js/core/app.js and look like this:
var app = angular.module('ApplicationSystem', ['ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.when('/login', {
templateUrl: 'js/login/templates/login.html',
controller: 'LoginController'
})
.when('/application', {
templateUrl: 'js/application/templates/application.html',
controller: 'ApplicationController'
})
.otherwise({
redirectTo: '/login'
});
}
]);
And as an example, the Login application itself does not load. Only a blank page loads. The Actual application in reference is loaded via an ng-controller directive (ng-app is used in the parent template).
<div class="container" ng-controller="LoginController">
<h2>Login</h2>
<!-- Contents -->
</div>
The parent template (index.html by reference)
<!doctype html>
<html>
<head>
<title>Application</title>
<script type="text/javascript" src="settings.js"></script>
<script type="text/javascript" src="lib/angular/angular.min.js"></script>
<script type="text/javascript" src="lib/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="lib/angular-animate/angular-animate.min.js"></script>
<script type="text/javascript" src="lib/angular-bootstrap/ui-bootstrap.min.js"></script>
<script type="text/javascript" src="lib/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="lib/angular-cookies/angular-cookies.min.js"></script>
<script type="text/javascript" src="lib/angular-ui-grid/ui-grid.min.js"></script>
<script type="text/javascript" src="lib/ngstorage/ngStorage.min.js"></script>
<script type="text/javascript" src="lib/ng-file-upload/ng-file-upload.min.js"></script>
<script type="text/javascript" src="lib/spin.js/spin.min.js"></script>
<script type="text/javascript" src="js/core/app.js"></script>
<script type="text/javascript" src="js/login/LoginController.js"></script>
</head>
<body>
<div class="masterwrapper" ng-app="ApplicationSystem">
<div ng-view></div>
</div>
</body>
</html>
And the aforementioned controller
var app = angular.module('ApplicationSystem', []);
app.controller('LoginController', function ($scope, $cookies, $location, $ngStorage) {
console.log("Init LoginController");
$scope.LogIn = function (username, password) {
//Login service and factory calls here
};
});
I'm not really clear on what the culprit could be here. If I can get the template to render again, that would at least get me back on track. Any suggestions?
I am using "prettyprint" along with "AngularJs" which is working very well, but only issue is if I use routing, then the prettyprint function is not working (as it might have been configured to run on pageLoad). Now, what if I am going to various ng-view pages and coming back? How to run the prettyprint function even on route change?
HTML:
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/google/code-prettify/master/styles/sons-of-obsidian.css">
<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.1/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
One
Two
Three
<div ng-view=""></div>
<script>
//App Declaration
var app = angular.module('myApp', ['ngRoute'] );
//Controllers
app.controller('myCtrl', function($scope) {
});
//Routers
app.config(function($routeProvider){
$routeProvider
.when('/one', {
templateUrl: 'one.html'
})
.when('/two', {
templateUrl: 'two.html'
})
.when('/three', {
templateUrl: 'three.html'
})
.otherwise({
redirectTo: '/one'
});
});
</script>
</body>
</html>
one.html
This is one
<pre class="prettyprint">
<div>
<p>
<a href="http://www.google.com">Google</a>
</p>
</div>
</pre>
two.html
This is two
Image on first time clicking 'one' link:
Going to 2nd view or 3rd view and then coming back:
Can someone help me out please?
I'm working on an angular application using asp.net web application empty template and i have a problem with using ng-app, when i use it and lave it blank i the $routeProvider doesn't get instantiated, but when i specify ng-app="myApp" to my module name, the content of the body starts to repeat to infinite loop.
I'm sure i'm missing something basic, but this problem is driving me crazy
thanks
here's my html code
this is main
view1
<div>
<div ng-view></div>
</div>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="app.js"></script>
and here's myApp code
(function () {
'use strict';
var app = angular.module('myApp', ['ngRoute']);
app.config([
'$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'index.html',
controller: 'main'
}).when('/view1', {
templateUrl: 'view1.html',
controller: 'main'
}).otherwise({
redirectTo: '/'
});
}
]);
app.controller('main', function ($scope) {
setTimeout(function() {
alert("from set");
},10000);
});
})();
the problem here is that index.html is not the template that should be loaded into the ng-app, it is the outer shell page. You are loading the entire app inside itself over and over, producing something like the following:
view1
<div>
view1
<div>
view1
<div>
view1
<div>
//... more and more loaded here
</div>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="app.js"></script>
</div>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="app.js"></script>
</div>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="app.js"></script>
</div>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="app.js"></script>
... essentially forever.
You should instead be loading only templates in your routes.
Is your default route loading the page into itself?
$routeProvider.when('/', {
templateUrl: 'index.html', <----- ???
controller: 'main'
})
I am currently working in setting up the structure for an angular app and can't get around this error. Below is the complete error message:
Failed to instantiate module app due to:
Error: [$injector:modulerr] http://errors.angularjs.org/1.5.3/$injector/modulerr?p0=a...)
at Error (native)
at http://127.0.0.1:8080/assets/libs/angular/angular.min.js:6:416
at http://127.0.0.1:8080/assets/libs/angular/angular.min.js:40:60
at q (http://127.0.0.1:8080/assets/libs/angular/angular.min.js:7:355)
at g (http://127.0.0.1:8080/assets/libs/angular/angular.min.js:39:135)
at http://127.0.0.1:8080/assets/libs/angular/angular.min.js:39:304
at q (http://127.0.0.1:8080/assets/libs/angular/angular.min.js:7:355)
at g (http://127.0.0.1:8080/assets/libs/angular/angular.min.js:39:135)
at eb (http://127.0.0.1:8080/assets/libs/angular/angular.min.js:43:164)
at c (http://127.0.0.1:8080/assets/libs/angular/angular.min.js:20:463
My setup is as follows:
index.html
<body ng-app="app">
<header>
</header>
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
<div ng-view></div>
</div>
<footer>
</footer>
<script type="text/javascript" src="assets/libs/angular/angular.min.js"></script>
<script type="text/javascript" src="assets/libs/angular-route/angular-route.min.js"></script>
<!-- Modules -->
<script type="text/javascript" src="app/app.routes.js"></script>
<script type="text/javascript" src="app/app.core.js"></script>
<script type="text/javascript" src="app/app.module.js"></script>
<!-- Controllers -->
<script type="text/javascript" src="app/components/homepage/homepageController.js"></script>
app.module.js
angular.module('app', [
'ngRoute',
'app.routes',
'app.core'
]);
app.routes.js
angular
.module('app.routes', ['ngRoutes'])
.config(function($routeProvider) {
$routeProvider
//root route
.when('/', {
templateUrl: 'app/components/homepage/homepageView.html',
controller: 'homepageCtrl'
});
});
app.core.js
angular
.module('app.core', []);
I'm using core for all the controllers, but the issue seems to be with what I am loading in app.module.js...
Can anyone give an idea of what's going wrong?
Here is a plunkr
https://plnkr.co/edit/Uv5fEvVZzmWguu32t4a9
The correct name for ['ngRoutes'] should be ['ngRoute'].
Updated Plunker: https://plnkr.co/edit/8W7QFndiTvtqfHCy6UWt?p=preview
I try simple Universal windows 8.1 project.
My default.html page:
<!DOCTYPE html>
<html ng-app="mainApp">
<head>
<meta charset="utf-8" />
<!-- WinJS references -->
<script src="scripts/services/winstore-jscompat.js"></script>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/winjs/js/base.min.js"></script>
<script src="node_modules/winjs/js/ui.min.js"></script>
<!-- angular -->
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<script src="node_modules/angular-winjs/js/angular-winjs.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers/EventsController.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
Project has one simple view and simple controller. When I use "win-list-view" in my view, (even empty win-list-view without bounding) I got error which i do not understand.
HTML1300: Navigation occurred.
default.html
DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337
default.html
Error: [$compile:noslot] http://errors.angularjs.org/1.5.3/$compile/noslot? p0=true&p1=%3Cdiv%20class%3D%22ng-isolate-scope%22%20item-data- source%3D%22manufacturers%22%20ng-transclude%3D%22true%22%3E
...
My page is open, but data on screen are in json format. Whole data binding array is shown on screen.
View:
<div>
<win-list-view item-data-source="manufacturers">
<win-item-template>
<div>
<h4>{{item.data.title}}</h4>
<h6>{{item.data.text}}</h6>
</div>
</win-item-template>
<win-list-layout></win-list-layout>
</win-list-view>
</div>
Controller:
(function () {
angular.module("mainApp")
.controller("EventsController", function ($scope) {
$scope.manufacturers = [
{ title: "marvelous mint", text: "gelato" },
{ title: "succulent strawberry", text: "sorbet" },
];
})
}());
My app:
(function() {
angular.module("mainApp", ["ngRoute", "winjs"]);
angular.module("mainApp")
.config(function ($routeProvider) {
$routeProvider
.when("/events", {
templateUrl: "views/events.html",
controller: "EventsController"
})
.otherwise({ redirectTo: "/events" });
});
}());
Why "win-list-view" tag on view caused that error?
Work on windows 8 with VS2015, maybe it has influence.