So I'm new to Angular and I've been struggling all day to get ngRoute to work without any success. So I decided to try out the ui-router but that's not working for me either.
(angularjs 1.5.0)
index.html
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title>My app</title>
<script src="js/libs/angular.min.js"></script>
<script src="js/libs/angular-ui-router.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div ui-view></div>
<a ui-sref="state1">State hello</a>
<a ui-sref="state2">State show</a>
</body>
</html>
main.js
var myApp = angular.module('myApp', ['ui.router']);
myApp.config(function($stateProvider, $urlRouterProvider)
{
$urlRouterProvider.otherwise("/state1");
$stateProvider
.state('state1', {
url: "/state1",
templateUrl: "partials/hello.html"
})
.state('state2', {
url: "/state2",
templateUrl: "partials/show.html"
});
});
hello.html & show.html
<div>{{"hello"}}</div>
When loading index.html I get this error:
angular.min.js:6 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0/$injector/modulerr?p0=MyApp&p1=Error%3A%2…
You're using wrong module name.
<html ng-app="MyApp">
var myApp = angular.module('myApp', ['ui.router']);
Change your module name to "MyApp" in your js file. i.e.
var myApp = angular.module('MyApp', ['ui.router']);
Related
New to angular js. Dont understand why ui-router is not injected.
Here is my index.html
<!DOCTYPE html>
<html ng-app='myapp'>
<head>
</head>
<body>
</body>
<script src='node_modules/angular/angular.js'></script>
<script type="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.20/angular-ui-router.js"></script>
<script src='app/app.js'></script>
</html>
And here is my app.js
(function(){
//allows angular to run
angular.module('myapp', ['ui.router']);
}());
Because you missed src, you wrote type instead.
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.20/angular-ui-router.js"></script>
Primarily you did not usesrc in <script> tag,
Also you need to specify your config, here is example how to use ui.router:
(function(){
//allows angular to run
var myapp = angular.module('myapp', ["ui.router"]);
myapp.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/")
$stateProvider
.state('home', {
url: "/",
templateUrl: "home.html"
})
.state('detail', {
url: "/detail",
templateUrl: "details/detail.html"
})
});
})();
live example : http://next.plnkr.co/edit/kHa07oBwnrmxnQ8w?preview
I don't manage to route using ui-router. It does work for me with ng-route, so I must have missed something basic. There is no error but I don't get any view.
The following code does not work (except for the otherwise statement):
angular.module("employeesApp", ["ui.router"])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('employeeList', {
url: "/employees",
templateUrl: "components/employee_list/employeeListView.html",
});
$urlRouterProvider.otherwise("/employees");
});
The following code does work:
angular.module("employeesApp", ["ngRoute"])
.config(function ($routeProvider) {
var employeeListRoute = {
templateUrl: "components/employee_list/employeeListView.html"
};
var otherwiseRoute = employeeListRoute;
$routeProvider
.when("/employeeList", employeeListRoute)
.otherwise(otherwiseRoute);
Here is my index.html (omitted not relevant elements):
<!DOCTYPE html>
<html lang="en" ng-app="employeesApp">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>
<script src="app.route.js"></script>
<script src="components/employee_list/employeeListCtrl.js"></script>
</head>
<body>
<div>
<ng-view />
</div>
</body>
</html>
What am I doing wrong when trying to use ui-router?
As #AminMeyghani already said, you should be using ui-view instead of ng-view directive to get router know that relative view should be loaded inside ui-view directive
<div>
<ui-view></ui-view>
</div>
Demo here
I can't get my angular app to route without changing the web page. I'm trying to get the page to change without refreshing and appear in the ng-view, but instead the console is throwing errors. See pastebin for errors http://pastebin.com/kTYwviSv
app.js
var myApp = angular.module('myApp', ['ngRoute'])
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
$routeProvider
.when('/page1.html', {
templateUrl: 'page1.html'
})
.when('/page2.html', {
templateUrl: 'page2.html'
});
$locationProvider.html5Mode({enabled:true, requireBase:false});
}]);
index.html
<!DOCTYPE html>
<head>
<title>Testing Angular On My Own</title>
</head>
<body ng-app="myApp">
{{"Hello"}}
<br>
<br>
<a ng-href="page1.html">Page 1</a>
<a ng-href="page2.html">Page 2</a>
<div ng-view></div>
<script src="bower_components/bower-angularjs/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
</body>
</html>
page1.html
This is Page 1
page2.html
This is Page 2
I am facing some problem while making app with angularJS - stateProvider.
I got Uncaught Error: [$injector:modulerr]
and yes, I am working on CI framework.
Here is my code:
index.php
<html lang="en" data-ng-app="myApp">
<head></head>
<body>
<div data-ui-view=""></div>
</body>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"
></script>
<script src="/js/app.js"></script>
</html>
app.js
"use strict";
var myApp = angular.module("myApp", ['ui.router']);
myApp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when("", "/home");
$stateProvider
.state("home", {
url: "/home",
templateUrl: 'home/main'
})
});
There is a working plunker
You have to reference UI-Router code:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
// this is not path to UI-Router
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>-->
<script
src="//rawgit.com/angular-ui/ui-router/0.2.15/release/angular-ui-router.js"></script>
(we do not need angular-router, but UI-Router)
Check here that your code will be working, once it gets the UI-Router into play
I checked this
AngularJS 1.2 $injector:modulerr but it didnot solve my problem
You can find my example here
http://jsbin.com/ziroq/1/edit?html,js,console
<html ng-app="app">
<head></head>
<body>
<h1>example 8</h1>
<p>Changing views with routes and $routeProvider</p>
<p>you need angular-routes.min.js file to use $routeProvider</p>
<div ng-view></div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.min.js"></script>
<script>
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider.when('list', {
controller: MyController,
templateUrl: '/example-08-list.html'
});
});
</script>
</body>
</html>