So, I'm playing around with AngularJS but now I'm kinda stuck....
I'm trying to split the template into smaller pieces/partials. I've started with the menu bar.
I created a custom directive that loads the template + controller with all the menu items.
HTML index
<!DOCTYPE html>
<html lang="en-us" ng-app="someApp">
<head>
<meta charset="utf-8">
<title>Magazijn</title>
<base href="/">
<!-- Stylesheets -->
</head>
<body>
<main-menu></main-menu>
<div id="page-wrapper" ng-class="globals.currentUser == null ? 'max' : ' '">
<div id="page-inner">
<div class="container">
<div ng-view></div>
</div>
</div>
</div>
<!-- jQuery / Bootstrap / Morris -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/metisMenu/2.5.0/metisMenu.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script src="/assets/js/main.js"></script>
<!-- Angular -->
<script src="https://code.angularjs.org/1.5.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.4/angular-route.min.js"></script>
<script src="https://code.angularjs.org/1.5.4/angular-cookies.min.js"></script>
<script src="/angular/app.js"></script>
<script src="/angular/routes.js"></script>
<!-- Services -->
<script src="/angular/services/auth-service.js"></script>
<script src="/angular/services/api-service.js"></script>
<!-- Directives -->
<script src="/angular/directives/menu-directive.js"></script>
<!-- Controllers -->
<script src="/angular/controllers/trucks-index-controller.js"></script>
<script src="/angular/controllers/trucks-show-controller.js"></script>
<script src="/angular/controllers/trucks-history-controller.js"> </script>
<script src="/angular/controllers/monitor-controller.js"></script>
<script src="/angular/controllers/messages-index-controller.js"> </script>
<script src="/angular/controllers/login-controller.js"></script>
JS
(function () {
'use strict';
angular
.module('app')
.controller('menuCtrl' , ['$scope','$timeout', function($scope, $timeout){
$scope.menu = {
"items" : [{
"name" : "Dashboard",
"url" : "/",
"icon" : "fa fa-dashboard fa-3x"
},
{
"name" : "TV Monitor",
"url" : "/monitor",
"icon" : "fa fa-television fa-3x"
},{
"name" : "Trucks",
"url" : "",
"icon" : "fa fa-truck fa-3x",
"childs": [{
"url" : "/trucks",
"name" : "Overview"
},{
"url" : "/trucks/history",
"name" : "History"
}]
}]
};
}])
.directive('mainMenu' , function(){
return {
restrict: 'E',
controller: 'menuCtrl',
templateUrl : '/templates/partial/nav.html'
}
})})();
HTML
<nav class="navbar-default navbar-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav" id="main-menu">
<li ng-repeat="m in menu.items">
<i class={{m.icon}}></i>{{m.name}} <span ng-if="m.childs.length > 1" class="fa arrow fa-2x"></span>
<ul class="nav nav-second-level collapse">
<li ng-repeat="c in m.childs">
{{c.name}}
</li>
</ul>
</li>
</ul>
</div>
</nav>
And on the index.html I simply call the directive with .
This all works fine except for the dropdown. I'm using mentis, which works fine if I leave all the code # the index page, but stops functioning when I load the html with a directive
This mentis is the library I used.
You need to $compile any dynamic html to make it work correctly: https://docs.angularjs.org/api/ng/service/$compile
This post should help:
Angular JS Directive - Template, compile or link?
also:
http://www.bennadel.com/blog/2794-when-do-you-need-to-compile-a-directive-in-angularjs.htm
Related
I have divs that are in different locations and are able to be moved and have a textfield. I am using a JSON file to store the coordinates for each different div as well as any text. I am also using angularjs for the interaction of the page. I got the draggable part down but I am having issues with saving the new coordinates as well as text. The user is suppose to click the save button and everything should be updated. I am using http.get to place the JSON file onto the page. I am stuck on how to use http.post to update the divs.
index.html
<!DOCTYPE html>
<html lang="en" ng-app="container">
<head>
<meta charset="utf-8">
<title>efoli</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="containers.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="Style/design.css">
</head>
<body ng-controller="ContainerController as contain">
<div id="grid"></div>
<div class="container">
<div class="row">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<a class="navbar-brand">NAME</a>
<form ng-submit="submit()">
<input type="submit" id="submit" value="save"/>
</form>
<ul class="nav navbar-nav navbar-right">
<li class=dropdown>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Account<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="drag resize" ng-repeat="product in contain.block" style="position:absolute; top:{{product.x}}; left:{{product.y}}" movement>
<h1>{{product.title}}</h1>
<textarea ng-model="newText" style="display:table-cell; width:inherit; height:inherit"></textarea>
</div>
</body>
</html>
container.js
(function() {
var app = angular.module('container', []);
app.controller('ContainerController', ['$http', function($http) {
var contain = this;
contain.block= [];
$http.get('data.json').success(function(data){
contain.block = data;
});
}]);
app.directive('movement', function(){
return {
restrict:'A',
link: function() {
$('.drag').draggable({grid:[25,25]});
$('.resize').resizable({grid:25});
}
}
});
}) ();
data.json
[
{ "title" : "Test1",
"text" : "",
"x" : "151px",
"y" : "350px" },
{ "title" : "Test2",
"text" : "",
"x" : "151px",
"y" : "700px" },
{ "title" : "Test3",
"text" : "",
"x" : "351px",
"y": "525px"},
{ "title" : "Test4",
"text" : "",
"x" : "251px",
"y" : "525px"},
{ "title" : "Test5",
"text" : "",
"x" : "451px",
"y" : "525px"}
]
I am learning Angularjs and Nodejs by developing a project.
I have followed this tutorial and organised my folder structure and route configurations.
Problem:
I have added a method called isActive to update ng-class based on tab click. But when I click the tab it is not calling the isActive method.
My guess is, I have done something wrong in appRoutes.js but not sure how to fix this. I am able to reach the MainController but not the methods in it.
I have another question, I need to make the Home tab active when I enter the application or when I clicked on home tab or when I click on application header too.
Below is the html and the js codes.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<base href="/">
<title>ets</title>
<link rel="stylesheet" type="text/css" href="libs/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/ets.css">
</head>
<body ng-app="etsApp">
<div id="mainDiv">
<div>
<section id="header_section" class="main-title"></section>
<section id="nav_section"></section>
</div>
<section id="body_section">
<div ng-view="ng-view"></div>
</section>
<section id="footer_section" class="footer-style"></section>
</div>
<script type="text/javascript" src="libs/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="libs/angular/angular.min.js"></script>
<script type="text/javascript" src="libs/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="js/controllers/MainCtrl.js"></script>
<script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>
<script type="text/javascript" src="js/appRoutes.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#header_section').load('views/partials/header.html');
$('#nav_section').load('views/partials/navigation_main.html');
$('#footer_section').load('views/partials/footer.html');
});
</script>
</body>
</html>
navigation_main.html
<div>
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li ng-class="{active : isActive('/home')}" id="nav_home">
Home
</li>
<li ng-class="{active : isActive('/expensereporting')}" id="nav_exprep">
Expense Reporting
</li>
<li ng-class="{active : isActive('/remainders')}">
Todo Remainder's
</li>
<li ng-class="{active : isActive('/pdfoperations')}">
PDF Operation's
</li>
<li ng-class="{active : isActive('/imageoperations')}">
Image Operation's
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login/Register</li>
</ul>
</nav>
</div>
header.html
<div>
<header id="header" style="margin-left: 50px;">
<a href="/" style="text-decoration: none; color: black;">
<strong>eTools Store</strong>
</a>
</header>
</div>
appRoutes.js
angular.module('appRoutes', []).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/partials/home.html',
controller: 'MainController'
})
.when('/home', {
templateUrl: 'views/partials/home.html',
controller: 'MainController'
});
$locationProvider.html5Mode(true);
}]);
app.js
angular.module('etsApp', ['ngRoute', 'appRoutes', 'HomeCtrl', 'MainCtrl']);
MainCtrl.js
angular.module('MainCtrl', []).controller('MainController', function($scope) {
console.log('Main Controller');
$scope.isActive = function(destination) {
console.log($location.path());
return destination === $location.path();
}
});
Your navigation_main.html is outside of controller scope. That's the main reason. Try to create separate controller for you navigation like this
.controller('NavCtrl', function($scope) {
isActive = function(destination) { /*...*/ }
}
Put it into file js/nav.js and add to your html
<script type="text/javascript" src="js/nav.js"></script>
And then add this controller to your navigation_main.html code
<div ng-controller="NavCtrl">
About problem not reaching isActive method:
Try to reorganize:
<script type="text/javascript" src="js/controllers/MainCtrl.js"> </script>
<script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>
<script type="text/javascript" src="js/appRoutes.js"></script>
<script type="text/javascript" src="js/app.js"></script>
into:
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/appRoutes.js"></script>
<script type="text/javascript" src="js/controllers/MainCtrl.js"></script>
<script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>
May be you forget to add .otherwise
.when('/', {
templateUrl: 'views/partials/home.html',
controller: 'MainController'
})
.when('/home', {
templateUrl: 'views/partials/home.html',
controller: 'MainController'
})
.otherwise({
redirectTo: '/'
});
Update :
Try this -
In navigation_main.html
<li ng-class="{'active' : path}" >
Image Operation's
</li>
MainCtrl.js
angular.module('MainCtrl', []).controller('MainController', function($scope) {
console.log('Main Controller');
$scope.itemClicked= function(destination) {
$scope.path = destination;
}
});
You can try angular ui-router for your routing and for adding an active class when a state is active. You only need to add ui-sref-active="YourActiveClassHere". Angular UI-Router
Try to change the order of this,
<script type="text/javascript" src="js/controllers/MainCtrl.js"></script>
<script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>
<script type="text/javascript" src="js/appRoutes.js"></script>
<script type="text/javascript" src="js/app.js"></script>
To this,
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/appRoutes.js"></script>
<script type="text/javascript" src="js/controllers/MainCtrl.js"></script>
<script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>
Try to add ng-click=isActive('/home'), in your a tag.
<li ng-class="{active : activeClass == 'home'}" id="nav_home">
<a href="/home" ng-click=isActive('/home')>Home</a>
</li>
In your MainCtrl add this line,
$scope.activeClass = '';
$scope.isActive = function(destination) {
$scope.activeClass = destination;
}
Here is the code for the partial view?
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Record Incident <small>Please enter important information in the audio...</small></h1>
<ol class="breadcrumb">
<li>
<h1> {{instruction}} </h1>
</li>
</ol>
</div>
</div>
Input something in the input box:
Submit
Here is the main index page
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<link href="data:image/gif;" rel="icon" type="image/x-icon" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<!-- Angular JS Library import -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<!-- SCROLLS -->
<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" />
<!-- SPELLS -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="app.js"></script>
</head>
<!-- define angular controller -->
<body ng-controller="mainController">
<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>
<i class="fa fa-home"></i> Home
</li>
<li>
<i class="fa fa-shield"></i> About
</li>
<li>
<i class="fa fa-comment"></i> Contact
</li>
<li>
<i class="fa fa-comment"></i> Tutorials
</li>
<li>
<i class="fa fa-comment"></i> Demo Writer
</li>
</ul>
</div>
</nav>
<div id="main">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view>
</div>
</div>
<footer class="text-center">
</footer>
</body>
This is the app.js code
// create the module and name it scotchApp
var scotchApp = angular.module('scotchApp', ['ngRoute']);
// configure our routes
scotchApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'partials/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'partials/about.html',
controller : 'aboutController'
})
// route for the tutorial page
.when('/tutorial', {
templateUrl : 'partials/tutorial.html',
controller : 'tutorialController'
})
.when('/demoWriter', {
templateUrl : 'demoWriter.html',
controller : 'demoWriterController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'partials/contact.html',
controller : 'contactController'
});
});
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
scotchApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
scotchApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
scotchApp.controller('tutorialController', function($scope) {
$scope.instruction = 'This is the tutorial page.';
// Load the Google Transliterate API
});
scotchApp.controller('demoWriterController', function($scope) {
$scope.instruction = 'This is the tutorial page.';
});
The problem is that even though the expected view is partially viewed in the expected ng-view section, even after loading I want to call some javascript code. And I want to know, how to include those javascript code in the project. And how to call the javascript so that it will do the expected task. I want to convert the typed text in the tutorial partial view to sinhala. For that here is the expected javascript code...
<script type="text/javascript">
// Load the Google Transliterate API
google.load("elements", "1", {
packages : "transliteration"
});
function onLoad() {
var options = {
sourceLanguage : google.elements.transliteration.LanguageCode.ENGLISH,
destinationLanguage : [google.elements.transliteration.LanguageCode.SINHALESE],
shortcutKey : 'ctrl+g',
transliterationEnabled : true
};
// Create an instance on TransliterationControl with the required
// options.
var control = new google.elements.transliteration.TransliterationControl(options);
// Enable transliteration in the textbox with id
// 'transliterateTextarea'.
control.makeTransliteratable(['transliterateTextarea']);
}
google.setOnLoadCallback(onLoad);
</script>
In addition to this I have to include this script too
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
Can anyone please explain me, where and how I should load the expected javascript code that has to be in that partial view which is called by the tutorialController in the app.js. Please explain me how to complete this task.
Use and ng-init to call a function on the target element. Asuming a textarea needs to be added to transliteration scope.
<textarea
ng-init="addTrnsEngine()"
id="tweet"
class="form-control primaryPostArea"
ng-model="newPost.text"
placeholder="Say something...">
</textarea>
where addTrnsEngine() is a function which adds the element to the google transliterate api.
you could send a send a unique id like in the example above or the tagName and search the document by the corresponding id or tagName. ( addTrnsEngine('tweet') )
example:
var addTrnsEngine() = function( targetId ){
var elem = document.getElementById( targetId );
//add transliteration on elem here.
}
I have having error when I try to mock backend with ngmockE2E.
"angularjs [ng:areq] Argument 'fn' is not a function, got string"
When I remove ngMock service, it works fine.
Index.html
<!doctype html>
<html lang="en" ng-app="userApp">
<head>
<meta charset="utf-8">
<title>IT Beams Angular App</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/all.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-cookies.js"></script>
<script type="text/javascript" src="js/ui-router.js"></script>
<script type="text/javascript" src="js/angular-resource.js"></script>
<script type="text/javascript" src="js/angular-mocks.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers.js"></script>
<script type="text/javascript" src="js/services.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<header id="header">
<div class="logo col-sm-12 col-lg-4">
<h1>logo</h1>
<ul class="nav nav-pills pull-right">
<li><a ui-sref="home" class="btn btn-success" ui-sref-active="btn-warning">Home</a></li>
<li><a ui-sref="login" class="btn btn-success" ui-sref-active="btn-warning">Login</a></li>
<li><a ui-sref="register" class="btn btn-success" ui-sref-active="btn-warning">Register</a></li>
</ul>
</div>
<div class="text-area col-sm-12 col-lg-8">
<h2>Test</h2>
</div>
</header>
<section id="main">
<div class="container">
<div class="row">
<div ui-view></div>
</div>
</div>
</section>
<footer id="footer">
<div class="container">
<div class="row">
<p class="text-center">Copyright IT Beams 2015</p>
</div>
</div>
</footer>
</div>
</div>
</body>
</html>
app.js
(function(ng){
var userApp = ng.module("userApp", ["ui.router", "ngResource", "ngMockE2E", "ngCookies", "mainCtrl"]);
userApp.config(["$stateProvider", "$urlRouterProvider", "$provide", function($stateProvider, $urlRouterProvider, $provide){
$urlRouterProvider.otherwise( "/" );
$provide.decorator("$httpBackend", ng.mock.e2e.$httpBackendDecorator);
$stateProvider
.state("login", {
url : "/login",
templateUrl : "views/login.html",
controller : "loginCtrl"
})
.state("register", {
url : "/register",
templateUrl : "views/register.html",
controller : "registerCtrl"
})
.state("home", {
url : "/",
templateUrl : "views/home.html",
controller : "homeCtrl"
})
}]);
userApp.run("$httpBackend", function($httpBackend){
var users = [
{ "id" : "1", "username" : "user1#test.com", "password" : "user1" },
{ "id" : "2", "username" : "user2#test.com", "password" : "user2" },
{ "id" : "3", "username" : "user3#test.com", "password" : "user3" },
{ "id" : "4", "username" : "user4#test.com", "password" : "user4" }
];
$httpBackend.whenGET("/login").respond(users);
console.log(testing);
});
})(angular);
Help is appreciated. Thanks
The run block is set up incorrectly.
You are passing a string as the first argument instead of a function:
userApp.run("$httpBackend", function($httpBackend) {
...
});
Hence the error.
It should either be:
userApp.run(function($httpBackend) {
...
});
Or if using the inline array notation like you have with the config block:
userApp.run(["$httpBackend", function($httpBackend) {
...
}]);
Not new to programming. But I'm new to angularjs. So it's probably a daft question..
I've been following a tutorial...but for some reason the page routing doesn't work.
I have a nav bar on the top, home, about, contact etc. Typical stuff.
I would like to be able to click on "about" and be routed to the about.html file on the same page.
Nothing appears! The index.html is in a partials file. Please note I'm a newbie to angular and I've followed the instructions. My server works fine. The Nav bar looks good but doesn't link properly.
This is the code for index.html. Thanks
<!-- define angular app -->
<html ng-app="financeApp">
<head>
<!-- SCROLLS -->
<!-- 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" />
<!-- SPELLS -->
<script src="js/angular.min.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="script.js"></script>
</head>
<!-- HEADER AND NAVBAR -->
<header>
<div class="wrap">
<!-- logo -->
<img class="logo" src="img/logo.png" />
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/"></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</nav>
</header>
<!-- define angular controller -->
<div class="main" ng-controller="mainController">
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
<div ng-view> </div>
<!-- angular templating -->
<!-- this is where content will be injected -->
</div>
</body>
</html>
and this is the code for script.js
// create the module and name it financeApp
// also include ngRoute for all our routing needs
var financeApp = angular.module('financeApp', ['ngRoute']);
// configure our routes
financeApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('#', {
templateUrl : 'partials/index.html',
controller : 'mainController'
})
// route for the about page
.when('#about', {
templateUrl : 'partials/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('#contact', {
templateUrl : 'partials/contact.html',
controller : 'contactController'
});
});
// create the controller and inject Angular's $scope
financeApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
financeApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
financeApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
The following should work for you.
You need to create partials/main.html
INDEX.HTML
<!DOCTYPE HTML>
<html ng-app="financeApp">
<head>
<meta charset="utf-8">
<!-- CSS -->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
</head>
<!-- HEADER AND NAVBAR -->
<header>
<div class="wrap">
<!-- logo -->
<!-- <img class="logo" src="img/logo.png" /> -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#/"></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</nav>
</div>
</header>
<body>
<div class="main" ng-controller="mainController">
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
<div ng-view></div>
<!-- angular templating -->
<!-- this is where content will be injected -->
</div>
</div>
<!-- App JS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-route.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
SCRIPT.JS
var financeApp = angular.module('financeApp', ['ngRoute']);
// configure our routes
financeApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'partials/main.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'partials/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'partials/contact.html',
controller : 'contactController'
})
.otherwise({
redirectTo: '/'
})
});
// create the controller and inject Angular's $scope
financeApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
financeApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
financeApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
I guess you followed this tutorial and at least it explains everything what you need.
Possible errors could be:
Wrong folder name -> check again if the templateURLs match your file system
Errors in the template files
If you provide us some error messages from the console, we can help you better.