So i created a simple app.js like this
var app = angular.module('app', ['ngRoute', 'ngResource']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'html/home.html',
});
});
but when i create a separate file routes.js
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'html/home.html',
});
});
The homepage is not shown. I double checked everything and i added the routes.js to the index page.
But it gives me this error : Uncaught ReferenceError: app is not defined.
But i don't know why? the app is not an anonymous function.
This is my index page
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="https://code.angularjs.org/1.4.4/angular.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.4.4/angular-resource.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.4.4/angular-route.js"></script>
<script type="text/javascript" src="routes.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
Since you use app variable in routes.js you need to load this file after app.js where this variable is created:
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="routes.js"></script>
Alternatively you could setup routes in separate modules and use those modules as dependencies to main module:
var app = angular.module('app', ['ngRoute', 'ngResource', 'main', 'admin']);
and then for example in main-moudle.js:
angular.module('main', []).config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'html/home.html',
});
Related
When I include ngRoute for routing I get this error $injector MOdulerr, Kindly let me know what am I doing wrong. Any help would be greatly appreciated.
Below are my two files, index.html and app.js
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-messages.min.js"></script>
<script type="text/javascript" src='app.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
</head>
app.js
var myapp = angular.module('myapp',['ngRoute'])
myapp.config(function($routeProvider,$locationProvider){
$locationProvider.hashPrefix('');
$routeProvider
.when('/sign-in', {
templateUrl: 'templates/sign-in.html',
controller: 'appctrl'
})
})
myapp.controller('appctrl', function ($scope) {
});
I've been working on my ngRoute without sucess. I can't load the module 'ngRoute'. I don't know why. When I try this code, nothing happens, just a blank page.
Here is my app.js .
var app = angular.module('tutorialApp', ['ngRoute', 'tutorialCtrlModule']);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "views/viewCourse.html"
controllers : "tutorialCtrl"
});
});
My index.html:
<html ng-app="tutorialApp">
<head>
<meta charset="utf-8">
<title>Teste</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<script src="lib/angular-route.min.js"></script>
<script src="lib/angular-locale-pt-br.js"></script>
<script src="lib/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/tutorialCtrl.js"></script>
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div ng-view></div>
</body>
</html>
Two Things:
Load angular-route.js after loading Angular.js
there is a syntax Error while defining the route in app.js; as there should be a comma ',' after 'templateUrl' value.
It should look like this:
.when("/", {
templateUrl : "views/viewCourse.html",
controllers : "tutorialCtrl"
});
Also do you mind sharing the URL while accessing this page in your the browser.
I have created a simple Plunker: http://plnkr.co/edit/tBisV2hhmJbHOyYAPPhn
angular.module("myApp", ['ngRoute']);
angular.module("myApp").config(function($routeProvider) {
$routeProvider
.when('/test', {
templateUrl: 'Welcome.html',
controller: 'TestController',
controllerAs: 'testController'
})
});
angular.module("myApp").controller('testCtrl', testCtrl);
function testCtrl($timeout, $q, $log, $location, $scope) {
$scope.navigate = function(){
$log.info('Success');
$location.path('/test');
}
}
Im just staring AngularJS app for 1st time. Followed some steps from tutorials but at the end ui router is not showing anything. Firebug is not showing any JS errors or warnings
my app.js file:
var app = angular.module("CRI", ["ui.router"]);
app.config(function ($stateProvider) {
$stateProvider
.state("Login", {
url: "/",
controller: "LoginController",
templateUrl: "views/login.html"
})
})
index.html file:
<!DOCTYPE html >
<html ng-app="CRI">
<head>
<title>LOGIN</title>
<meta charset="UTF-8"></meta>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,800,700italic,800italic|Open+Sans+Condensed:300,700,300italic&subset=latin,latin-ext,cyrillic-ext,cyrillic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/korisnik.css" />
<script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/easypiechart.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<script src="app.js"></script>
<script src="controllers/loginController.js"></script>
</head>
<body>
<div ui-view></div>
</body>
</html>
controller:
app.controller("LoginController", function($scope, $http){
})
template is saved in views/login.html
To use the root path, the state config url property should be an empty string, not '/'.
$stateProvider.state("Login", {
url: "",
controller: "LoginController",
templateUrl: "views/login.html"
});
http://plnkr.co/edit/Iypm5fXgpcrLS7Smlc62?p=preview
what url should I use to reach the "/phone" part from the routing? I am trying this http://localhost:8888/workspace/AngA/phones but the page is blank. Or maybe the url is correct, and I forgot something else.
Here is the whole code (2 html pages for the view, 2 js pages) :
//in home.html
<h1>home</h1>
<p>
Add a {{ test }}
</p>
----
//in index.html
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="utf-8">
<title>My HTML File</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="css/app.css">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body>
<div ng-view>hello</div>
</body>
</html>
----
//in app.js
'use strict';
var phonecatApp = angular.module('phonecatApp', [
'ngRoute',
'phonecatControllers'
]);
phonecatApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/home.html',
controller: 'PhoneListCtrl'
}).
when('/phones/:phoneId', {
templateUrl: 'partials/detail.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}
]);
----
//in controllers.js
'use strict';
var phonecatControllers = angular.module('phonecatControllers', []);
phonecatControllers.controller('PhoneListCtrl', function ($scope) {
$scope.test = 'age';
});
phonecatControllers.controller('PhoneDetailCtrl', function($scope, $routeParams){
});
You haven't specified html5mode so to access that page you would do something like this instead:
http://localhost:8888/workspace/AngA/#/phones
I have upgraded from Angular.JS 1.1.5 to 1.2.26 and now im geting
Error: [$injector:unpr] Unknown provider: $routeProvider
Here is my index.html:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.angularjs.org/1.2.26/angular.js"></script>
<script src="https://code.angularjs.org/1.2.26/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="ckeditor/ckeditor.js"></script>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div ng-app="app">
<header ng-include="'partials/menu.html'"></header>
<div id="body">
<ng-view></ng-view>
</div>
</div>
</body>
</html>
Here is my app.js:
var app = angular.module('app', ['ngRoute'])
.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/tasks', {
templateUrl: 'partials/tasks.html',
controller: 'tasksCtrl'
}).
when('/goals', {
templateUrl: 'partials/goals.html',
controller: 'goalsCtrl'
}).
when('/notes', {
templateUrl: 'partials/notes.html',
controller: 'notesCtrl'
}).
otherwise({
redirectTo: "/"
});
}
]);
I also tried Angular and Angular-route versions 1.2.6, 1.2.9, 1.3.0 but same issue.
I need Angular features that are only 1.2.0+, so downgrading is not an option.