Angular ui.router, any result and any error - angularjs

I have a little problem with my views in angular. I try to use ui.router to config my routes but it doesn't work. I try to use the console but it's clear. I don't know what i can do fix this problem.
(function(){
'use strict';
const app = angular.module('myApp', ['common.services', 'common.servicesMock', 'ui.router']);
app.config(function($stateProvider, $locationProvider) {
$locationProvider.hashPrefix("");
$stateProvider
.state('newList', {
template: 'views/newsListView.html',
url: '/news',
controller: 'newsCtrl as vm',
});
//Delete the # in the routes
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
});
}())
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Wiki</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="styles/bootstrap.min.css">
<link rel="stylesheet" href="styles/app.css">
</head>
<body ng-app="myApp">
<div class="container">
<div ui-view>
</div>
</div>
<!-- Libraries & Framweorks -->
<script src="scripts/js/angular.min.js"></script>
<script src="scripts/js/angular-mocks.js"></script>
<script src="scripts/js/angular-resource.min.js"></script>
<script src="scripts/js/angular-ui-router.min.js"></script>
<script src="scripts/js/jquery-3.1.1.min.js"></script>
<script src="scripts/js/bootstrap.min.js"></script>
<!-- App Scripts -->
<script src="scripts/app.js"></script>
<!-- Controllers -->
<script src="scripts/controllers/newsCtrl.js"></script>
<script src="scripts/controllers/categoriesCtrl.js"></script>
<!-- Services -->
<script src="scripts/common/services/common.services.js"></script>
<script src="scripts/common/services/categories/categoriesService.js"></script>
<script src="scripts/common/services/common.servicesMock.js"></script>
<script src="scripts/common/services/news/newsResource.js"></script>
</body>
</html>
This is the view i want to show in the browser.
<div class="row center" ng-controller="categoriesCtrl as vm">
<button type="button" class="btn btn-default" ng-click="vm.toggleCategories()">{{vm.showCategories ? "Hide" : "Show"}} Categories</button>
<br>
<div ng-show="vm.showCategories" class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active" ng-repeat="cate in vm.categories">
<input type="radio" name="options" id="{{cate}}" autocomplete="off">{{cate}}
</label>
</div>
</div>
<div class="row">
<div class="row">
<fieldset>
<legend class="title">Outstanding</legend>
</fieldset>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" ng-repeat="newsItem in vm.news | filter:{important: true} | orderBy: '-date'">
<div class="thumbnail">
<img ng-src='{{newsItem.banner}}' class="banner">
<div class="caption">
<span class="date">{{newsItem.date | date}}</span>
<h3>{{newsItem.newsTitle}}</h3>
<p>
{{newsItem.newsDesciption.substring(0,200) + "..."}}
</p>
<p>
Read More
Edit
</p>
</div>
</div>
</div>
</div>
<div class="row">
<fieldset>
<legend class="title">Last News</legend>
</fieldset>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 thumbnail-xs" ng-repeat="newsItem in vm.news | filter:{important: false} | orderBy: '-date'">
<div class="thumbnail">
<img ng-src='{{newsItem.banner}}' class="banner">
<div class="caption">
<span class="date">{{newsItem.date | date}}</span>
<h3>{{newsItem.newsTitle}}</h3>
<p>
{{newsItem.newsDesciption.substring(0,200) + "..."}}
</p>
<p>
Read More
Edit
</p>
</div>
</div>
</div>
</div>
</div>
</div>
Thanks for your time.


Although you declared the states, you need to actually "enter" the state when you first launch it. Assuming the newList state is the state that you want to go to, you can do it in two ways:
using $urlRouterProvider to route to /news at root:
app.config(function($stateProvider, $locationProvider, $urlRouterProvider) {
$locationProvider.hashPrefix("");
$urlRouterProvider.when('/','/news');
$stateProvider
.state('newList', {
template: 'views/newsListView.html',
url: '/news',
controller: 'newsCtrl as vm',
});
//Delete the # in the routes
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
});
via .run method in angular
app.run(['$state',function($state){
$state.go('newList');
}])

Related

ngRoute can't get data from one view to another

Angular.JS issue with ng-repeat value from inputs
I'm having an issue with ng-repeat, where I can't see to get the values from the input to show on the UI when submitted.
I'm very new to angular JS, hence why I'm trying to build a simple to do app to learn the basics.
On the newItem.html page, there is a form with a function Add(). There are two inputs for the project and the title. There is a button to add the new to do item.
Once the button is clicked and it runs the Add() function, it should add a new object to the toDoList array with the Project and the Task.
On the homePage.html I want to display a project title and the task details. Later down the line I want to generate the entire row on each click but for now I'm just trying to get the text to change.
I'm obviously missing something obvious here, I've read through the documentation for ng-repeat and ng-model, but just can't seem to grasp it.
index.html
<!DOCTYPE html>
<html lang="en" ng-app="ToDoListApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>To Do App</title>
<script src="angular/angular.min.js"></script>
<script src="angular-route/angular-route.min.js"></script>
<script src="app.module.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="app/assets/css/home.css">
<link href="https://fonts.googleapis.com/css?family=Acme&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/4c765e5630.js" crossorigin="anonymous"></script>
</head>
<body ng-view ng-controller="toDoCtrl">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>
</body>
</html>
homePage.html
<div class="row header">
<div class="col-12">
<h1>DOINGO</h1>
<p>0 Open Tasks</p>
</div>
</div>
<div class="row toDoList">
<div class="row newItem">
<div class="col-2">
<button class="itemComplete btn"><i class="far fa-check-circle fa-2x"></i></button>
</div>
<div class="col-8">
<h4 ng-repeat="Project in ToDoList">{{ToDoList.Project}}</h4>
<p ng-repeat="Task in ToDoList">{{ToDoList.Task}}.</p>
</div>
<div class="col-2">
<button class="btn deleteItem"><i class="far fa-times-circle fa-2x"></i></button>
</div>
</div>
</div>
<div class="row addItemRow">
<div class="col-12 text-center">
<a href="#/newItem"><button type="button" class="btn btn addItem">
<i class="fas fa-plus-circle fa-3x"></i>
</button></a>
</div>
</div>
newItem.html
<div class="row header">
<div class="col-12">
<h1>DOINGO</h1>
</div>
</div>
<div class="row addNewItem">
<form ng-submit='Add()' class="form">
<div class="row projectInput text-center">
<div class="col-12">
<input type="text" ng-model="ToDoList.Project" placeholder="Enter a project title" ng-required>
</div>
</div>
<div class="row taskInput text-center">
<div class="col-12">
<input type="text" ng-model="ToDoList.Task" placeholder="Enter your task details" ng-required>
</div>
</div>
<div class="buttonRow row">
<div class="col-12 text-center">
<button type="submit" class="btn-lg btn-success addItemButton">Add</button>
</form>
<button class="btn-lg btn-danger cancelButton">Cancel</button>
</div>
</div>
</div>
app.module.js
var app = angular.module('ToDoListApp', ['ngRoute']);
app.config(function ($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
.when("/", {
templateUrl: "app/home/homePage.html",
controller: "toDoCtrl"
})
.when("/newItem", {
templateUrl: "app/newItem/newitem.html",
controller: "toDoCtrl"
})
.otherwise({
redirectTo: '/'
})
});
//main controller for app functionality
app.controller('toDoCtrl', function ($scope) {
$scope.ToDoList = []
//add the new to do item to the array
$scope.Add = function () {
$scope.ToDoList.push({
Project: $scope.Project,
Task: $scope.Task
});
$scope.Project = '';
$scope.Task = '';
};
});

Adding or removing a new route to the routeProvider, it doesn't load anything in AngularJS

I have this website routing my pages with 4 html files and it works fine, but when I am trying to add or remove a new one, it just shows blank screen with my navigation bar only.
The error I caught is :
Error: $injector:modulerr
Module Error
Being a noobie in Angular I saw various solutions that have to do with the ngRoute, but in vain.
I want to add more html files for the rest of the projects but I can't.
I use 1.2.15 version and call the files locally. Below is the Angular script I am using, there's also some code added to browse through the projects.
var app = angular.module('myapp', ['ngRoute','ngAnimate']);
app.controller('MainCtrl', function($scope, NextBackBasicService, $location) {
$scope.message = $location.path();
});
app.config(function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'home.html',
controller: 'MainCtrl'
}).
when('/example1', {
templateUrl: 'example.html',
controller: 'MainCtrl'
}).
when('/example2', {
templateUrl: 'example2.html',
controller: 'MainCtrl'
}).
when('/example3', {
templateUrl: 'example3.html',
controller: 'MainCtrl'
}).
when('/example4', {
templateUrl: 'example4.html',
controller: 'MainCtrl'
});
$routeProvider.otherwise({
redirectTo: '/route'
});
});
app.run(function($rootScope, NextBackBasicService){
$rootScope.goNext = function() {
NextBackBasicService.goNext();
};
$rootScope.goBack = function() {
NextBackBasicService.goBack();
};
});
app.factory('NextBackBasicService', function($route, $location) {
//array for keeping defined routes
var routes = [];
angular.forEach($route.routes, function(config, route) {
//not to add same route twice
if (angular.isUndefined(config.redirectTo)) {
routes.push(route);
}
});
return {
goNext: function() {
var nextIndex = routes.indexOf($location.path()) + 1;
if (nextIndex === routes.length) {
$location.path(routes[0]);
} else {
$location.path(routes[nextIndex]);
}
},
goBack: function() {
//window.history.back();
var backIndex = routes.indexOf($location.path()) - 1;
if (backIndex === -1) {
$location.path(routes[routes.length - 1]);
} else {
$location.path(routes[backIndex]);
}
}
};
});
And here is my index.html
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="utf-8" />
<title>My Title</title>
<!--<script data-require="angular.js#1.2.x" src="http://code.angularjs.org/1.2.15/angular.js" data-semver="1.2.15"></script>
<script src="https://code.angularjs.org/1.2.15/angular.js" data-semver="1.2.15"></script>-->
<!--<script data-require="ng-route#*" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0-rc.3/angular-route.js"></script>-->
<!--<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-animate.js"></script>
<script data-require="jquery#*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700&subset=latin,greek,greek-ext' rel='stylesheet' type='text/css'>
<!--Loads Angular
<script src="https://code.angularjs.org/1.2.15/angular.min.js" data-semver="1.2.15"></script>
<script src="https://code.angularjs.org/1.2.15/angular-route.min.js" data-semver="1.2.15"></script>
<script src="https://code.angularjs.org/1.2.15/angular-animate.min.js"></script>-->
<script src="js/angular.min.js" data-semver="1.2.15"></script>
<script src="js/angular-route.min.js" data-semver="1.2.15"></script>
<script src="js/angular-animate.min.js"></script>
<script src="app.js"></script>
<!--jQuery-->
<script src="js/jquery.js" type="text/javascript">
<!--Bootstrap-->
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
<script>
$( document ).ready(function() {
$(".burger").click(function(){
$(this).toggleClass("active");
});
});
</script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container mynavigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<!--<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>-->
<button type="button" class="burger navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span></span>
</button>
<a class="pull-left" href="#">
<img class="logodimensions" src="images/svg/logo.svg" alt="">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a class="animlinks" href="#">WORK</a>
</li>
<li>
<a class="animlinks" href="#">CONTACT / ABOUT</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="grids">
<div ng-controller="MainCtrl">
<ng-view></ng-view>
</div>
</div>
</body>
</html>
And bellow is the home where the routing takes place between the projects.
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-3 col-lg-3 col-xs-6 zeromarginpadding">
<div class="thumbnail zeromarginpadding">
<a href="#/example1">
<div class="caption">
<p class="thumbnail-text-title">Cards</p>
<p class="thumbnail-text-descr">Project subtitle</p>
</div>
</a>
<img class="imagethumb" src="" alt="...">
</div>
</div>
<div class="col-md-3 col-sm-3 col-lg-3 col-xs-6 zeromarginpadding">
<div class="thumbnail zeromarginpadding">
<a href="#/example2">
<div class="caption">
<p class="thumbnail-text-title">Cards</p>
<p class="thumbnail-text-descr">Project subtitle</p>
</div>
</a>
<img class="imagethumb" src="" alt="...">
</div>
</div>
<div class="col-md-3 col-sm-3 col-lg-3 col-xs-6 zeromarginpadding">
<div class="thumbnail zeromarginpadding">
<a href="#/example3">
<div class="caption">
<p class="thumbnail-text-title">Cards</p>
<p class="thumbnail-text-descr">Project subtitle</p>
</div>
</a>
<img class="imagethumb" src="" alt="...">
</div>
</div>
<div class="col-md-3 col-sm-3 col-lg-3 col-xs-6 zeromarginpadding">
<div class="thumbnail zeromarginpadding">
<a href="#/example4">
<div class="caption">
<p class="thumbnail-text-title">Cards</p>
<p class="thumbnail-text-descr">Project subtitle</p>
</div>
</a>
<img class="imagethumb" src="" alt="...">
</div>
</div>
</div>
</div>

According to the posted error, the last reference to $routeProvider is undefined. There seems to be something odd going on, because that shouldn't be possible. To side-step this issue though, you can remove the last reference to $routeProvider and just chain the .otherwise() call onto the previous .when() call, like so:
.when('/example4', { templateUrl: 'example4.html', controller: 'MainCtrl' }).otherwise({ redirectTo: '/route' });

Angular js 1.4.8 Injection module error

I am trying to implement oauth service in angular 1.4.8. I am getting an error in console like this:
Uncaught Error:
http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=angularoauthexample…udflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.8%2Fangular.min.js%3A19%3A463)(anonymous function) # angular.js:38(anonymous function) # angular.js:4458n # angular.js:340g # angular.js:4419eb # angular.js:4344c # angular.js:1676yc # angular.js:1697Zd # angular.js:1591(anonymous function) # angular.js:29013j # jquery.js:3148k.fireWith # jquery.js:3260m.extend.ready # jquery.js:3472J # jquery.js:3503
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!--font-awesome-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!--Bootstrap social-->
<link rel="stylesheet" href="css/bootstrap-social.css">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
</head>
<body ng-app="angularoauthexampleApp">
<div id="wrap">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand em-text" href="#"><i class="fa fa-user-plus fa-1x" style="color:whitesmoke"></i></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><p class="navbar-text">Already have an account?</p></li>
<li class="dropdown">
<b>Login</b> <span class="caret"></span>
<ul id="login-dp" class="dropdown-menu">
<li>
<div class="row">
<div class="col-md-12">
Login via
<div class="social-buttons">
<i class="fa fa-facebook"></i> Facebook
<!--<button class="btn btn-primary" ng-click="login()"><i class="fa fa-google" ng-click="login()"></i> Google</button>-->
<i class="fa fa-google" ng-click="login()"></i> Google
</div>
or
<form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required>
<div class="help-block text-right">Forget the password ?</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> keep me logged-in
</label>
</div>
</form>
</div>
<div class="bottom text-center">
New here ? <b>Join Us</b>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- Bootstrap core JavaScript + Angular Js
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/about.js"></script>
</body>
</html>
Angular code:
App.js:
'use strict';
angular
.module('angularoauthexampleApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/afterlogin', {
templateUrl: 'views/afterlogin.html',
controller: 'AboutCtrl'
})
.when('/access_token=:accessToken', {
template: '',
controller: function ($location,$rootScope) {
var hash = $location.path().substr(1);
var splitted = hash.split('&');
var params = {};
for (var i = 0; i < splitted.length; i++) {
var param = splitted[i].split('=');
var key = param[0];
var value = param[1];
params[key] = value;
$rootScope.accesstoken=params;
}
$location.path("/afterlogin");
}
})
.otherwise({
redirectTo: '/'
});
});
Main.js
angular.module('angularoauthexampleApp')
.controller('MainCtrl', function ($scope) {
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
$scope.login=function() {
var client_id="343625411797-hcm0impil8l1mughb8ma2jj966um05bp.apps.googleusercontent.com";
var scope="email";
var redirect_uri="http://localhost:9046/RTH_Sample4/app/";
var response_type="token";
var url="https://accounts.google.com/o/oauth2/auth?scope="+scope+"&client_id="+client_id+"&redirect_uri="+redirect_uri+
"&response_type="+response_type;
window.location.replace(url);
};
});
About.js
angular.module('angularoauthexampleApp')
.controller('AboutCtrl', function ($scope,$rootScope) {
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
$scope.root=$rootScope;
});
I tried searching online for a fix but nothing worked so far.
How do I fix this?

I think you have an error defining your controllers.
Instead of this:
angular.module('angularoauthexampleApp')
.controller('MainCtrl', function ($scope) {
// controller content
});
try this instead:
angular.module('angularoauthexampleApp')
.controller('MainCtrl', ['$scope', function ($scope) {
// controller content
}]);
See documentation: https://docs.angularjs.org/guide/controller

Angular UI-Bootstrap - Collapse function not working

I have been following the docs for ui-bootstrap. And in the section(ui.bootstrap.collapse) they talk about making a collapse function for content when you click a button.
But I cannot seem to make the Collapse seem to work in my code.
What am I missing or doing wrong?
I have looked at other Stacks and have seen that other people use anchor tags instead of button tags. So I don't think that is the issue.
Index HTML
<!DOCTYPE html>
<html lang="en" data-ng-app="app">
<head>
<meta charset="UTF-8">
<meta name="description" content="stuff">
<meta name="keywords" content="stuff">
<meta name="author" content="stuff">
<title> Title</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css">
<!-- Custom styles -->
<link href="css/style.css" rel="stylesheet">
<link href="css/svg_style.css" rel="stylesheet">
<!--Jquery -->
<script src="lib/jquery/dist/jquery.min.js"></script>
<!-- Angular -->
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular-route/angular-route.min.js"></script>
<script src="lib/angular-animate/angular-animate.min.js"></script>
<script src="lib/angular-cookies/angular-cookies.min.js"></script>
<!-- Bootstrap -->
<script src="lib/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="lib/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
</head>
<body id="index_body">
<div data-ng-controller="HeaderCtrl">
<div class="top-header" data-ng-include="templateUrl"></div>
</div>
<div class="page [[ pageClass ]]" ng-view autoscroll="true"></div>
<!-- Main JS -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/headerCtrl.js"></script>
<script src="js/controllers/modal.js"></script>
<script src="js/controllers/ResonanceCtrl.js"></script>
<script src="js/controllers/ContactCtrl.js"></script>
<script src="js/controllers/LandingCtrl.js"></script>
<script src="js/controllers/SignInCtrl.js"></script>
<!-- Directives -->
<!-- <script src="js/directives/LandingAnimation.js"></script> -->
<script src="js/jq.js"></script>
</body>
</html>
Landing Page HTML
<div class="col-xs-12 col-sm-12 col-md-5">
<div class="caption">
<h1 class="text-left h-color thin">
Text Header
</h1>
<p class="lead p-color">More Text</p>
<!-- Here is my Toggle Button --> <a class="lead p-color learn-button togglebtn shake shake-rotate" data-ng-click="isCollapsed = !isCollapsed">
<small>
<i class="glyphicon" data-ng-class="{'glyphicon-minus': status.open, 'glyphicon-plus': !status.open}"></i> Learn More
</small>
</a>
</div>
</div>
<div class="hidden-xs hidden-sm col-md-7 col-lg-offset-1 col-lg-6">
<img alt="Image" class="img-responsive center-block" src="images/kip-animation.png" />
</div>
<!--Here is the what I want to collapse -->
<div id="myContent" collapse="isCollapsed" class="row row-offset row-pad" style="margin: 0 30px">
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="lead caption text-center">
<h3 class="h-color2">Item 1</h3>
</div>
<div class="thumbnail">
<img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Logo">
</div>
<div class="lead caption">
<p class="p-color"><small>Text</small>
</p>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="lead caption text-center">
<h3 class="h-color2">Item 2</h3>
</div>
<div class="thumbnail">
<img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Logo">
</div>
<div class="lead caption">
<p class="p-color"><small>Text</small>
</p>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="lead caption text-center">
<h3 class="h-color2">Item 3</h3>
</div>
<div class="thumbnail">
<img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Logo">
</div>
<div class="lead caption">
<p class="p-color"> <small>Some Text</small>
</p>
</div>
</div>
</div>
<!-- END DROPDOWN-->
App Javascript
var app = angular.module('app', ['ui.bootstrap', 'ngRoute', 'ngAnimate']);
app.config(function($interpolateProvider, $routeProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
$routeProvider
.when('/', {
templateUrl : 'pages/LandingPage.html',
controller : 'LandingCtrl'
})
.otherwise({ redirectTo: '/signin'});
});
Controller Javascript
app.controller('LandingCtrl', function($scope) { // jshint ignore:line
$scope.pageClass = 'page-landing';
$scope.isCollapsed = true;
});

I solved the issue. I was using Jquery before to toggle the display either hidden or shown.
In my Css I had:
myContent {
display: none;
}
Once I deleted that. It worked perfectly fine.

ng view Not Loading Partials in Angularjs

I'm developing a web app with angularjs and have run into some problems with ng-view. I have configured the routes in app.js, but when I load the main page, the partials do not show up in the view.
Here is my index.html:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.js"></script>
<script src="app.js"></script>
</head>
<body>
<div id="headerwrap" ng-controller="headerCtrl">
<span class="logo pull-left">{{appDetails.title}}</span>
<span class="tagline-pull">{{ appDetails.tagline}}</span>
<div class="nav-wrap pull left">
<ul class="nav nav-pills">
<li class="active">Books</li>
<li>Kart</li>
</ul>
</div>
</div>
<div ng-view></div>
</body>
</html>
Here is my app.js:
var myApp = angular.module("myApp", ["ngRoute"]);
myApp.config(function($routeProvider){
$routeProvider
.when("/books", {
templateURL: 'book-list.html',
controller: "BookListCtrl",
})
.when("/kart", {
templateURL: 'kart-list.html',
})
.otherwise({
redirectTo: '/books'
})
});
myApp.controller("headerCtrl", function($scope){
$scope.appDetails = {};
$scope.appDetails.title="Book Store";
$scope.appDetails.tagline="Browse our books";
});
myApp.controller("BookListCtrl", function($scope){
$scope.books = [
{
title:"Hunger Games",
price:205,
rating:5,
col:"red"
},
{
title:"Harry Potter",
price:255,
rating:4,
col:"blue"
}
];
});
Here is my first partial, book-list.html:
<div id="booklistwrapper">
<form role="form">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
<div>
<ul class="list-unstyled">
<li class="book" style="background: {{book.col}}" ng-repeat="book in books">
<div class="book-details clearfix">
<h3>{{book.title}}</h3>
<p>{{book.price}}</p>
<ul>
<li>{{'Rating: ' + book.rating}}</li>
</ul>
</div>
</li>
</ul>
</div>
Here is my second partial, kart-list.html:
<div>
This is the Kart
</div>
Neither partial will load. Does anyone know what this might be due to?

Thats because you have a typo, its
templateUrl
not
templateURL
http://plnkr.co/edit/3CPLZssLAAoxhLRV1NAZ?p=preview

Resources