I'm following a tutorial on Thinkster to learn Angular and MEAN Stack, however I for some reason can't get my template to load inline with my loaded HTML. Can someone point out where I'm going wrong here? The code isn't coloring correctly, and the page doesn't render anything when loaded in a browser.
What am I not understanding about this? The template tags seem to not be matching?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flapper News</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src="app.js"></script>
<style>.glyphicon-thumbs-up {cursor:pointer}</style>
</head>
<body ng-app="flapperNews"><!--ng-controller="MainCtrl" style="margin-left:20px; margin-right:20px;"-->
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
</div>
</div>
<!-- Start template -->
<script type="text/ng-template" id="/home.html">
<div class="page-header">
<h1>Flapper News</h1>
</div>
<div ng-repeat="post in posts | orderBy: '-upvotes'">
<span class="glyphicon glyphicon-thumbs-up" ng-click="incrementUpvotes(post)"></span>
{{post.upvotes}}
<span style="font-size:20px; margin-left:10px;">
<a ng-show="post.link" href="{{post.title}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
</span>
</div>
<form ng-submit="addPost()" style="margin-top:30px;">
<h3>Add a new post</h3>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Title"
ng-model="title"></input>
</div>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Link"
ng-model="link"></input>
</div>
<button type='submit' class="btn btn-primary">Post</button>
</form>
</script>
<!-- end template -->
<!-- start template -->
<script type="text/ng-template" id="/posts.html">
<div class="page-header">
<h3>
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
</h3>
</div>
<div ng-repeat="comment in post.comments | orderBy:'-upvotes'">
<span class="glyphicon glyphicon-thumbs-up" ng-click="incrementUpvotes(comment)"></span>
{{comment.upvotes}} - by {{comment.author}}
<span style="font-size:20px; margin-left:10px;">
{{comment.body}}
</span>
</div>
</script>
<!-- end template -->
</body>
</html>
I'm getting this error:
Error: $injector:modulerr
Module Error
Here's my app.js
/*global angular*/
var app = angular.module('flapperNews', []);
angular.module('flapperNews', ['ui.router']);
app.factory('posts',[function(){
var o = {
posts: []
};
return o;
}]);
app.config([ '$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
});
.state('posts', {
url: '/posts/{id}',
templateUrl: '/posts.html',
controller: 'PostsCtrl'
});
$urlRouterProvider.otherwise('home');
}]);
app.controller('MainCtrl', ['$scope','posts', function($scope, posts) {
$scope.posts = posts.posts;
$scope.posts = [
{title: 'post 1', upvotes: 12},
{title: 'post 2', upvotes: 14},
{title: 'post 3', upvotes: 16},
{title: 'post 4', upvotes: 11},
{title: 'post 5', upvotes: 1}
];
$scope.addPost = function(){
if (!$scope.title || $scope.title === '') {return;}
$scope.posts.push({
title: $scope.title,
link: $scope.link,
upvotes: 0,
comments: [
{author: 'Joe', body: 'Cool post!', upvotes: 0},
{author: 'Bob', body: 'Great idea but everything is wrong!', upvotes: 0}
]
});
$scope.title = '';
$scope.link = '';
}
$scope.incrementUpvotes = function(post){
post.upvotes += 1;
}
}]);
app.controller('PostsCtrl', [ '$scope', '$stateParams', 'posts',
function($scope, $stateParams, posts){
$scope.post = posts.posts[$stateParams.id];
}]);
Check your angular-ui-router.js library address it's cloudfare not cloudflare.
EDIT
Remove the unnecessary ; from the home state
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
});
and remove the line angular.module('flapperNews', ['ui.router']);
add the ui.router to the first line var app = angular.module('flapperNews', ['ui.router']);
To working JS:
var app = angular.module('flapperNews', ["ui.router"]);
app.factory('posts',[function(){
var o = {
posts: []
};
return o;
}]);
app.config([ '$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
})
.state('posts', {
url: '/posts/{id}',
templateUrl: '/posts.html',
controller: 'PostsCtrl'
});
$urlRouterProvider.otherwise('home');
}]);
app.controller('MainCtrl', ['$scope','posts', function($scope, posts) {
$scope.posts = posts.posts;
$scope.posts = [
{title: 'post 1', upvotes: 12},
{title: 'post 2', upvotes: 14},
{title: 'post 3', upvotes: 16},
{title: 'post 4', upvotes: 11},
{title: 'post 5', upvotes: 1}
];
$scope.addPost = function(){
if (!$scope.title || $scope.title === '') {return;}
$scope.posts.push({
title: $scope.title,
link: $scope.link,
upvotes: 0,
comments: [
{author: 'Joe', body: 'Cool post!', upvotes: 0},
{author: 'Bob', body: 'Great idea but everything is wrong!', upvotes: 0}
]
});
$scope.title = '';
$scope.link = '';
}
$scope.incrementUpvotes = function(post){
post.upvotes += 1;
}
}]);
app.controller('PostsCtrl', [ '$scope', '$stateParams', 'posts',
function($scope, $stateParams, posts){
$scope.post = posts.posts[$stateParams.id];
}]);
HTML:
Related
I'm following a MEAN tutorial on Thinkster (https://thinkster.io/mean-stack-tutorial) and can't find a sollution for passing the route parameter.
My problem comes from this section in the tutorial (https://thinkster.io/mean-stack-tutorial#the-posts-page)
When I want to see the comments of a post (by passing the route parameter in my URL). The tutorial says :
For now, we will consider the index of the post to be its id. We can use $stateParams to retrieve the id from the URL and load the appropriate post.
Using the folowing code :
$scope.post = posts.posts[$stateParams.id];
<span>
Comments
</span>
I have no idea what I'm doing wrong. But I don't think my code runs through the PostCtrl controller.
Anyone knows what I'm doing wrong?`
<html>
<head>
<title>Flapper News</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src="app.js"></script>
<style>
.glyphicon-thumbs-up {
cursor: pointer
}
</style>
</head>
<body ng-app="flapperNews">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
<!-- Waar de template moet geplaatst worden in actieve state !-->
</div>
</div>
<!-- Home state !-->
<script type="text/ng-template" id="/home.html">
<div class="page-header">
<h1>Flapper News</h1>
</div>
<div ng-repeat="post in posts | orderBy:'-upvotes'">
<span class="glyphicon glyphicon-thumbs-up" ng-click="incrementUpvotes(post)"></span> {{post.upvotes}}
<span style="font-size:20px; margin-left:10px;">
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
</span>
<span>
Comments
</span>
</div>
<form ng-submit="addPost()" style="margin-top:30px;">
<h3>Add a new post</h3>
<div class="form-group">
<input type="text" class="form-control" placeholder="Title" ng-model="title"></input>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Link" ng-model="link"></input>
</div>
<button type="submit" class="btn btn-primary">Post</button>
</form>
</script>
<!-- Posts state !-->
</script>
<script type="text/ng-template" id="/posts.html">
<div class="page-header">
<h3>
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
</h3>
</div>
<div ng-repeat="comment in post.comment | orderBy:'-upvotes'">
<span class="glyphicon glyphicon-thumbs-up"
ng-click="incrementUpvotes(comment)"></span>
{{comment.upvotes}} - by {{comment.author}}
<span style="font-size:20px; margin-left:10px;">
{{comment.body}}
</span>
</div>
</script>
<!-- Andere state !-->
</body>
</html>
var app = angular.module('flapperNews', ['ui.router']);
app.config([
'$stateProvider',
'$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$stateProvider.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
});
$stateProvider.state('posts', {
url: '/posts/{id}',
templateUrl: '/posts.html',
controller: 'PostsCtrl'
});
$urlRouterProvider.otherwise('home');
}
]);
/* We creeeren een nieuw object dat een property posts heeft.
We geven dan die variabele (o) terug zodat deze door elke angular module kan gebruikt worden.
Je kan hier ook methode in exporteren
$scope.posts = posts.posts in MainCtrl --> Nu wordt elke wijziging opgeslaan in de service*/
app.factory('posts', [function () {
var o = {
posts: []
};
return o;
}]);
app.controller('MainCtrl', [
'$scope', 'posts',
function ($scope, posts) {
$scope.posts = posts.posts
$scope.posts = [{
title: 'post 1',
upvotes: 5
}, {
title: 'post 2',
upvotes: 2
}, {
title: 'post 3',
upvotes: 15
}, {
title: 'post 4',
upvotes: 9
}, {
title: 'post 5',
upvotes: 4
}];
$scope.addPost = function () {
if (!$scope.title || $scope.title === '') {
return;
}
$scope.posts.push({
title: $scope.title,
link: $scope.link,
upvotes: 0,
comments: [{
author: 'Joe',
body: 'Cool post!',
upvotes: 0
}, {
author: 'Bob',
body: 'Great idea but everything is wrong!',
upvotes: 0
}]
});
$scope.title = '';
$scope.link = '';
};
$scope.incrementUpvotes = function (post) {
post.upvotes += 1;
};
}
]);
app.controller('PostsCtrl', [
'$scope',
'$stateParams',
'posts',
'post',
function ($scope, $stateParams, posts, post) {
$scope.post = posts.posts[$stateParams.id];
}
]);
You have re-declared $scope.posts in your MainCtrl, so changes in MainCtrl are never being reflected in your posts factory.
The problem is at:
$scope.posts = posts.posts;
$scope.posts = [{
title: 'post 1',
upvotes: 5
}, {
title: 'post 2',
upvotes: 2
}, {
title: 'post 3',
upvotes: 15
}, {
title: 'post 4',
upvotes: 9
}, {
title: 'post 5',
upvotes: 4
}];
The first statement is setting $scope.posts equal to your factory object, the second is setting it to a local array.
You should instead use push to add your data into the factory array.
$scope.posts = posts.posts;
$scope.posts.push({
title: 'post 1',
upvotes: 5
}, {
title: 'post 2',
upvotes: 2
}, {
title: 'post 3',
upvotes: 15
}, {
title: 'post 4',
upvotes: 9
}, {
title: 'post 5',
upvotes: 4
});
Also, you have an extra injection in your PostsCtrl, there is no post service to be injected.
A full working copy of your code with relevant changes is on plnkr.
I am trying to run the tab in a template, included through ng-view using routes. Unfortunately, when I click on template, it is not working. Please help me to solve the problem. Here is the code:
Index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script></head>
<script src="app.js"></script>
</head>
<body ng-controller="application">
<header>Template 1<br />Template 2</header>
<div ng-view="templateUrl"></div>
</body>
</html>
Template1.html
I am template 1
Template2.html
<div role="presentation" class="text-center" ng-repeat="listitem in patient_tab">
<a href="javascript:void(0)" ng-click="tabClick(clickTab)">
<i class="{{ listitem.patientTab_icon }}" aria-hidden="true"></i> <br />
{{ listitem.patientTab_name }}
</a>
</div>
<ng-include src="patient_template"></ng-include>
I am template 2
ptemplate1.html
I am ptemplate 1
ptemplate2.html
<h2>Patient template 2</h2>
app.js
var medicalapp = angular.module('app', ['ngRoute']);
medicalapp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/template1', {
templateUrl: 'template1.html',
controller: 'template_controller1'
}).
when('/template2', {
templateUrl: 'template2.html',
controller: 'template_controller2'
}).
otherwise({
redirectTo: '/template1'
});
}]);
medicalapp.controller('application', function($scope){
});
medicalapp.controller('template_controller2', function($scope){
$scope.patient_tab= [
{
patientTab_name: 'ptemplate1',
url: 'patient_template1.html',
patientTab_icon: 'fa fa-area-chart'
},
{
patientTab_name: 'ptemplate2',
url: 'patient_template1.html',
patientTab_icon: 'fa fa-file-text'
},
];
$scope.patient_template = 'patient_template1.html';
$scope.tabClick= function(tab){
$scope.patient_template = tab.url;
}
});
thanks Guys.. For help. Answer are:-
Template2.html
<div role="presentation" class="text-center" ng-repeat="listitem in patient_tab">
<a href="javascript:void(0)" ng-click="tabClick(listitem)">
<i class="{{ listitem.patientTab_icon }}" aria-hidden="true"></i> <br />
{{ listitem.patientTab_name }}
</a>
</div>
app.js
var medicalapp = angular.module('app', ['ngRoute']);
medicalapp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/template1', {
templateUrl: 'template1.html',
controller: 'template_controller1'
}).
when('/template2', {
templateUrl: 'template2.html',
controller: 'template_controller2'
}).
otherwise({
redirectTo: '/template1'
});
}]);
medicalapp.controller('application', function($scope){
});
medicalapp.controller('template_controller2', function($scope){
$scope.patient_tab= [
{
patientTab_name: 'ptemplate1',
url: 'patient_template1.html',
patientTab_icon: 'fa fa-area-chart'
},
{
patientTab_name: 'ptemplate2',
url: 'patient_template1.html',
patientTab_icon: 'fa fa-file-text'
},
];
$scope.patient_template = 'patient_template1.html';
$scope.tabClick= function(listitem ){
$scope.patient_template = listitem.url;
}
});
The name or string ng-click="tabClick(listitem)"> i.e listitem should be same for
$scope.tabClick= function(listitem ){
$scope.patient_template = listitem.url;
}
I am coding a weather app with open weather and I would like to save the city (the input) as a variable to call it on another view. So I would like to type in Vienna, send it to result.html and post there the current weather and to check which clothes I should wear, e.g. if the emperature is under 20° the app should say that I should wear a jacket.
Here is my home.html:
<ion-view title="" hide-nav-bar="true" hide-back-button="true">
<ion-content>
<div class="list card">
<div class="item item-avatar">
<img src="img/appicon.png">
<h2>Weather App</h2>
<p>What clothes do you need?</p>
</div>
</div>
<div class="list">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" placeholder="City" ng-model="inputs.city">
</label>
<input class="button button-small" type="submit" ng-click="saveText(inputs)" value="Save" ng-controller="WeatherCtrl" />
</div>
</div>
</ion-content>
</ion-view>
Here my app.js:
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
controller: 'HomeCtrl',
templateUrl: 'views/home.html'
})
.state('result', {
url: '/result',
controller: 'WeatherCtrl',
templateUrl: 'views/result.html'
});
$urlRouterProvider.otherwise('/home');
})
.controller('HomeCtrl', function($scope) {
$scope.forcastDisabled = true
})
.controller('WeatherCtrl', function ($scope, $http, $ionicLoading, $location) {
var directions = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'];
$scope.getIconUrl = function(iconId) {
return 'http://openweathermap.org/img/w/' + iconId + '.png';
};
$scope.save = {};
$ionicLoading.show();
$scope.saveText = function (inputs) {
alert('Geht');
$location.path('result');
$scope.save = angular.copy(inputs);
$scope.inputs.city;
}
var vm = this;
// Vienna
var id = 2761369;
var city = 'Vienna';
var URL = 'http://api.openweathermap.org/data/2.5/weather?q=' + city;
var request = {
method: 'GET',
url: URL,
params: {
q: city,
mode: 'json',
units: 'imperial',
cnt: '7',
appid: '938c0cf5969f353bc718735f59aeffd6'
}
};
$http(request)
.then(function(response) {
vm.data = response.data;
$scope.weather = response.data;
}).
catch(function(response) {
vm.data = response.data;
$scope.weather = response.data;
});
$ionicLoading.hide();
});
And last my result.html:
<ion-view view-title="Current Weather">
<ion-content>
<div class="list card">
<div class="item item-divider"><h1>City: {{weather.name}}</h1></div>
<div class="item item-thumbnail-left">
<img src="{{getIconUrl(weather.weather[0].icon)}}" />
<h1>{{weather.weather[0].main}}</h1>
</div>
<div class="item item-icon-left">
<i class="icon ion-thermometer"></i>
<h2>Current Temperature: {{weather.main.temp}}°</h2>
</div>
<div class="item item-icon-left">
<i class="icon ion-thermometer"></i>
<h2>Today's High: {{weather.main.temp_max}}°</h2>
</div>
<div class="item item-icon-left">
<i class="icon ion-thermometer"></i>
<h2>Today's Low: {{weather.main.temp_min}}°</h2>
</div>
<div class="item item-icon-left">
<i class="icon ion-waterdrop"></i>
<h2>Humidity: {{weather.main.humidity}}%</h2>
</div>
<div class="item item-icon-left">
<i class="icon ion-shuffle"></i>
<h2>Wind: {{weather.wind.speed}}mph, {{getDirection(weather.wind.deg)}}</h2>
</div>
</div>
</ion-content>
</ion-view>
I know I am not currently using the input, because I do not know how to do this in js. So how can I call my input in the url and then in the request?
Thanks in advance!
Try to:
Add the city variable as a parameter to your state definition:
.state('result', {
url: '/result',
controller: 'WeatherCtrl',
templateUrl: 'views/result.html',
params: {
city: null
}
})
Pass the variable to the target state:
$state.go("result", {city: inputs.city});
Inject the $stateParams service and use the variable in the controller:
var city = $stateParams.city;
See https://github.com/angular-ui/ui-router/wiki/URL-Routing for more details.
EDIT
Check out this plunker demonstrating my changes: https://plnkr.co/edit/3dvhPCjv24Lebduy8BZz
Note that I moved the saveText() function to the HomeCtrl and removed the ng-controller directive from your home.html.
I found the article from angularcode
and this link is helpful.
But I have some problem with my webpage structure that doesn't want to have the div tag for containing data-ng-view attribute. How do I get data, but no this div tag?
This is some code from the tutorial:
var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'toaster']);
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/login', {
title: 'Login',
templateUrl: '/login.php',
controller: 'authCtrl'
})
.when('/logout', {
title: 'Logout',
templateUrl: '/login.php',
controller: 'logoutCtrl'
})
.when('/signup', {
title: 'Signup',
templateUrl: 'partials/signup.html',
controller: 'authCtrl'
})
.when('/dashboard', {
title: 'Dashboard',
templateUrl: '/dashboard.php',
controller: 'authCtrl'
})
.when('/', {
title: 'Login',
templateUrl: '/login.php',
controller: 'authCtrl',
role: '0'
})
.otherwise({
redirectTo: '/login'
});
}])
.run(function ($rootScope, $location, Data) {
$rootScope.$on("$routeChangeStart", function (event, next, current) {
$rootScope.authenticated = false;
Data.get('session').then(function (results) {
if (results.uid) {
$rootScope.authenticated = true;
$rootScope.uid = results.uid;
$rootScope.name = results.name;
$rootScope.email = results.email;
} else {
var nextUrl = next.$$route.originalPath;
if (nextUrl == '/signup' || nextUrl == '/login') {
} else {
$location.path("/login");
}
}
});
});
});
I want to separate the structure for each page. What's any method to link to other page instead show like templateURL on data-ng-view but the function of user authentication session still work?
UPDATE
This is my code from my project
Note that I have try templateURL both .html and .php are the same result.
index.php
<div ng-app="myApp" data-ng-view="" id="ng-view"></div>
<toaster-container toaster-options="{'time-out': 3000}"></toaster-container>
<!-- authentification script -->
<script src="/pooh/dist/js/angular.min.js"></script>
<script src="/pooh/dist/js/angular-route.min.js"></script>
<script src="/pooh/dist/js/angular-animate.min.js"></script>
<script src="/pooh/dist/js/toaster.js"></script>
<script src="/pooh/app/app.js"></script>
<script src="/pooh/app/data.js"></script>
<script src="/pooh/app/directives.js"></script>
<script src="/pooh/app/authCtrl.js"></script>
app.js
var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'toaster']);
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/login', {
title: 'Login',
templateUrl: '/pooh/login.php',
controller: 'authCtrl'
})
.when('/logout', {
title: 'Logout',
templateUrl: '/pooh/login.php',
controller: 'logoutCtrl'
})
.when('/signup', {
title: 'Signup',
templateUrl: 'partials/signup.html',
controller: 'authCtrl'
})
.when('/dashboard', {
title: 'Dashboard',
templateUrl: '/pooh/dashboard.php',
controller: 'authCtrl'
})
.when('/', {
title: 'Login',
templateUrl: '/pooh/login.php',
controller: 'authCtrl',
role: '0'
})
.otherwise({
redirectTo: '/login'
});
}])
.run(function ($rootScope, $location, Data) {
$rootScope.$on("$routeChangeStart", function (event, next, current) {
$rootScope.authenticated = false;
Data.get('session').then(function (results) {
if (results.uid) {
$rootScope.authenticated = true;
$rootScope.uid = results.uid;
$rootScope.name = results.name;
$rootScope.email = results.email;
} else {
var nextUrl = next.$$route.originalPath;
if (nextUrl == '/signup' || nextUrl == '/login') {
} else {
$location.path("/login");
}
}
});
});
});
login.php
<?php include ($_SERVER['DOCUMENT_ROOT'] . '/pooh/head.php');?>
<body class="hold-transition login-page">
<div class="login-box">
<div class="login-logo">
<b>Pooh</b>Furniture
</div>
<!-- /.login-logo -->
<div class="login-box-body">
<p class="login-box-msg">Sign in to start your session</p>
<form method="post">
<div class="form-group has-feedback">
<input ng-model="login.email" class="form-control" placeholder="Email">
<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input ng-model="login.password" type="password" class="form-control" placeholder="Password">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="row">
<div class="col-xs-8">
<div class="checkbox icheck">
<label>
<input type="checkbox"> Remember Me
</label>
</div>
</div>
<!-- /.col -->
<div class="col-xs-4">
<button ng-click="doLogin(login)" data-ng-disabled="loginForm.$invalid" type="submit" class="btn btn-primary btn-block btn-flat">Sign In</button>
</div>
<!-- /.col -->
</div>
</form>
<a class="hidden" href="#">I forgot my password</a><br>
</div>
<!-- /.login-box-body -->
</div>
<!-- /.login-box -->
<!-- jQuery 2.1.4 -->
<script src="/pooh/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- Bootstrap 3.3.5 -->
<script src="/pooh/bootstrap/js/bootstrap.min.js"></script>
<!-- iCheck 1.0.1 -->
<script src="/pooh/plugins/iCheck/icheck.min.js"></script>
<script>
$(function () {
$('input').iCheck({
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-blue',
increaseArea: '20%' // optional
});
});
</script>
</body>
</html>
dashboard.php
<?php
//check if already logged in move to home page
//if logged in redirect to members page
//if( $user->is_logged_in() ){ header('Location: login.php'); }
?>
<?php $page = 'summary'; ?>
<?php include ($_SERVER['DOCUMENT_ROOT'] . '/pooh/header.php');?>
<?php include ($_SERVER['DOCUMENT_ROOT'] . '/pooh/sidebar.php');?>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Dashboard
<small>Overall information</small>
</h1>
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i> Level</li>
<li class="active">Here</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<!-- Your Page Content Here -->
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<?php include ($_SERVER['DOCUMENT_ROOT'] . '/pooh/footer.php');?>
some of code from header.php
to show that the body tag has class attribute
<body class="hold-transition fixed skin-blue sidebar-mini">
I'm following this tutorial to get familiar with the MEAN stack. I got to the point where they start using a routing configuration using ui-router. I've set everything up like they have it, but my page isn't rendering anything in my <ui-view> element.
(this was working before I added the routing config)
Here's what my files look like:
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Flapper News</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script scr="indexHomeState.js"></script>
<script src="indexController.js"></script>
<script src="postsService.js"></script>
<style> .glyphicon-thumbs-up { cursor:pointer } </style>
</head>
<body ng-app="flapperNews">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
</div>
</div>
<script type="text/ng-template" id='/home.html'>
<div class="page-header">
<h1>Flapper News</h1>
</div>
<div ng-repeat="post in indexCtrl.getPosts() | orderBy:'-upvotes'">
<span class="glyphicon glyphicon-thumbs-up"
ng-click="indexCtrl.incrementUpvotesForPost(post)"></span>
{{post.upvotes}}
<span style="font-size:20px; margin-left:10px;">
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
</span>
</div>
<form ng-submit="indexCtrl.addPost()"
style="margin-top:30px;">
<h3>Add a new post</h3>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Title"
ng-model="indexCtrl.title"></input>
</div>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Link"
ng-model="indexCtrl.link"></input>
</div>
<button type="submit" class="btn btn-primary">Post</button>
</form>
</script>
</body>
</html>
routingConfig (indexHomeState.js)
angular.module('flapperNews')
.config('indexHomeState', indexHomeState);
indexHomeState.$inject = ['$stateProvider', '$urlRouterProvider'];
function indexHomeState($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'indexController as indexCtrl'
});
$urlRouterProvider.otherwise('home');
}
my angular app/controller declaration:
angular.module('flapperNews', ['ui.router'])
.controller('indexController', indexController);
indexController.$inject = ['postsService'];
function indexController(postsService) {
var vm = this;
vm.test = 'Hello world';
vm.getPosts = postsService.getPosts;
vm.addPost = postsService.addPost(vm.title, vm.link);
vm.incrementUpvotesForPost = postsService.incrementUpvotesForPost;
}
post service
angular.module('flapperNews')
.factory('postsService', postsService);
function postsService() {
var serv = this;
var posts = [
{title: 'post 1', upvotes: 5},
{title: 'post 2', upvotes: 2},
{title: 'post 3', upvotes: 15},
{title: 'post 4', upvotes: 9},
{title: 'post 5', upvotes: 4}
];
function getPosts() {
return posts;
}
function addPost(title, link) {
if(!title || title === '') { return; }
posts.push({
title: vm.title,
link: vm.link,
upvotes: 0
});
vm.title = '';
vm.link = '';
}
function incrementUpvotesForPost(post) {
post.upvotes ++;
}
return {
getPosts: getPosts,
addPost: addPost,
incrementUpvotesForPost: incrementUpvotesForPost
}
}
Your code looks good only the thing you are missing is, you need to change
$urlRouterProvider.otherwise('home');
to
$urlRouterProvider.otherwise('/home');
Also you have misspelled the src to scr for indexHomeState.js, That restricting your JS files from loading
Scripts
<script src="indexController.js"></script>
As you don't have indexHomeState provider in your app, you shouldn't add indexHomeState as a string inside config block.
angular.module('flapperNews')
.config('indexHomeState', indexHomeState);
It would be simply
angular.module('flapperNews')
.config(indexHomeState); //removed `'indexHomeState',` from config
Demo Plunkr