Angular Ng-Repeat Ordered List - javascript

I am having trouble with Angular, this is my first time using it after taking the lessons in CodeAcademy. My code is as follows:
HTML:
<body style="padding-top: 0px;" data-spy="scroll" ng-app="SummerMill">
<section id="intro" class="main style1 dark">
<!-- Header -->
<header ng-controller="MainController" id="header">
<!-- Logo -->
<h1 id="logo">Summer Mill</h1>
<a ng-mouseover="locations()"
style="color:black;text-decoration:initial;"
id="logoii"
href="http://localhost/locations">Locations</a>
<!-- Nav -->
<nav id="nav">
<ul class="nav navbar-nav">
<li ng-repeat="headerLink in headerLinks">{{headerLink.text}}</li>
</ul>
</nav>
</header>
App.js
var app = angular.module('SummerMill', []);
MainController.js
app.controller('MainController', ['$scope', function($scope) {
$scope.headerLinks = [
{
text: 'Intro',
alternativeText: 'Arlington'
},
{
text: 'Wholesale',
alternativeText: 'New York'
}
];
}]);
The header just gives me {{headerLink.text}}
Why? :'(
Edit: It turned out that I had an error in an earlier script injected before angular that was causing the problem. Simply rearranging the order of the <script src=""></script> tags solved it for me.
So instead of this:
<script src="javascript/init.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
I did this:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="javascript/init.js"></script>


It turns out the problem was that I had an error in an earlier script that was loading in the header, with angular originally being injected after this errant script.
Once I put angular first, everything was fine.
:)

Related

AngularJS - nginclude sidebar will dont have the function for the dropdown

i have build one web which include sidebar and the main content. I included the sidebar with ng-include , but the sidebar is not able to function.
<html>
<head>
<link href="lepwww/css/maincss.css" rel="stylesheet">
</head>
<body ng-app="myapp" ng-controller="dataController">
<div class="main-container">
<div ng-include="templates"></div>
</div>
<!-- Angular JS Scripts -->
<script src="lepwww/css/angular-1.6.1/angular.js"></script>
<script src="lepwww/css/angular-1.6.1/angular-animate.min.js"></script>
<script src="lepwww/css/angular-1.6.1/angular-aria.min.js"></script>
<script src="lepwww/css/angular-1.6.1/angular-messages.min.js"></script>
<script src="lepwww/vendors/svg-assets-cache/svg-assets-cache.js"></script>
<script src="lepwww/vendors/angular-material/angular-material.js"></script>
<script>
var app = angular.module("myapp", ['ngMaterial', 'ngMessages', 'material.svgAssetsCache']);
app.filter('startFrom', function () {
return (input, start) => {
start = +start; //parse to int
return input.slice(start);
}
});
app.controller("dataController", ["$scope", "$http", "$element",
function ($scope, $http, $element) {
$scope.templates = 'view/layout/sidebar.html';
}
]);
</script>
<script src="lepwww/vendors/jquery/dist/jquery.min.js"></script>
<script src="lepwww/js/dialog/zebra_dialog.js"></script>
<!-- Bootstrap -->
<script src="lepwww/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="lepwww/js/test.js"></script>
<script src="lepwww/js/utils.js"></script>
</body>
</html>
If i copy direct the code to replace the nginclude, but able to function.
This is my sidebar code:
<div class="col-md-3 left_col">
<div class="left_col scroll-view">
<div class="navbar nav_title" style="border: 0;">
<a href="console.html" class="site_title">
<div class="profile_pic">
<img src="lepwww/images/lep_icon.png" alt="..." width="50" height="50">
</div>
<span>LEP-DMS</span>
</a>
</div>
<div class="clearfix"></div>
<!-- sidebar menu -->
<div id="sidebar-menu" class="main_menu_side main_menu" style=" margin-top:12px">
<div class="menu_section">
<h3>General</h3>
<ul class="nav side-menu">
<li>
<a>
<i class="fa fa-home"></i>Home
<span class="fa fa-chevron-down"></span>
</a>
<ul class="nav child_menu">
<li>
Dashboard
</li>
</ul>
</li>
<li>
<a>
<i class="fa fa-tv"></i> Inventory
<span class="fa fa-chevron-down"></span>
</a>
<ul class="nav child_menu">
<li id="li_hardware">
Hardware
</li>
<li id="li_software" class="">
Software
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
I tried to include the javascript file inside also, still not working.
Tried the method to switch the jquery file and angularjs file(The position of javascript file changed, still not able to work).
Any idea how does this problem occur? Since i check the console also not found any error for this.
Thanks.

If you couldn't find any error in console, that's mean either the code doesn't being trigger or the code being trigger but selector select nothing(it also could be selector undefined but well handle in your code snippet, that probably why it doesn't output undefined exception)
Next if it get trigger, check whether or not your sidebar javascript call before ng-include, simply use break point to verify.
If it is trigger before, you can simply a <script>... <your js code to make sidebar work> ...</script> under the end of your ng-include file. Manually call the function again, at this point, it should work since your html component appear in DOM.

Can't make ng-view work

I'm new to angular and trying to learn it, so I guess this is a pretty basic question,
I am trying to use ng-view, so far with no success.
this is my code:
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello world</title>
<script src="~/scripts/refernces/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="~/scripts/refernces/angular.min.js"></script>
<script src="~/scripts/refernces/angular-route.min.js"></script>
<script src="../../scripts/App/myApp.js"></script>
</head>
<body ng-app="myApp">
<nav class='navbar navbar-default'>
<div class='container-fluid'>
<div class='navbar-header'>
<a class='navbar-header' href='Home'>Demo Site</a>
</div>
<div>
<ul class='nav navbar-nav'>
<li class='active'><a href='#Home'>Home</a></li>
<li><a href='/#About'>About</a></li>
<li><a href='/#Contact'>Contact</a></li>
<li><a href='/#Other'>Other</a></li></ul></div</div></nav>"
<div ng-view></div>
</body>
JS:
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when("#About", {
template: '<h1>about</h1>'
})
.when("Contact",
{
template: '<h1>Contact</h1>'
});
});
I've tried declaring 'when' with and without the '#' sign, and I know Angular is loading fine (I have a controller that acts as I expect and I don't have any errors in the console) but I can't seem to make the routing work.
Tnx

If you set $locationProvider.html5Mode to true, you need to add:
<base href="/">
in the head of the document.
Also you do not need to use the hash in the href.
So give this code a try:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="/">
<title>Hello world</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.angularjs.org/1.4.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.9/angular-route.min.js"></script>
</head>
<body ng-app="myApp">
<nav class='navbar navbar-default'>
<div class='container-fluid'>
<div class='navbar-header'>
<a class='navbar-header' href='Home'>Demo Site</a>
</div>
<div>
<ul class='nav navbar-nav'>
<li class='active'><a href='Home'>Home</a></li>
<li><a href='/About'>About</a></li>
<li><a href='/Contact'>Contact</a></li>
<li><a href='/Other'>Other</a></li>
</ul>
</div
</div>
</nav>
<div ng-view></div>
<script>
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when("/About", {
template: '<h1>about</h1>'
})
.when("/Contact",
{
template: '<h1>Contact</h1>'
});
});
</script>
</body>

You are actually pretty close, first off, one small typo in your html:
<<li><a href='/#Other'>Other</a></li></ul></div</div></nav>
^^^ missing end caret
Next up, we can talk about ngRoute's HTML5 mode. You explicitly set HTML5 mode to true, which means that angular is going to attempt to use all links you provide it as actual URLs, instead of append a URL fragment (#fake/url/here) to the current url and using that for routing. THe difference looks like this:
HTML5 mode == true
http://yoursite.com/angularPage/Contact
http://yoursite.com/angularPage/About
HTML5 mode == false
http://yoursite.com/angularPage#/Contact
http://yoursite.com/angularPage#/About
Looking at your HTML, I guessed that since you were using the # character, you did not want to use HTML5 mode, so I modified your stuff to look like this. Note how I changed the links, and your routeProvider.
<body ng-app="myApp">
<nav class='navbar navbar-default'>
<div class='container-fluid'>
<div class='navbar-header'>
<a class='navbar-header' href='Home'>Demo Site</a>
</div>
<div>
<ul class='nav navbar-nav'>
<li class='active'><a href='#Home'>Home</a></li>
<li><a href='#About'>About</a></li>
<li><a href='#Contact'>Contact</a></li>
<li><a href='#Other/Page'>Other</a></li></ul></div></div></nav>
<div ng-view></div>
</body>
JS
myApp.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(false);
$routeProvider.when("/About", {
template: '<h1>about</h1>'
})
.when("/Contact",
{
template: '<h1>Contact</h1>'
})
.when("/Other/Page",
{
template: '<h1>OtherPage</h1>'
});
});
Check the fragment syntax, and not how the routeProvider essentially parses your #Other/Page into /Other/Page. Also note the lack of a / before the links in your <a> tags, a / there means an absolute link, which would replace your current navigation tree.

$routeProvider not working properly in AngularJS (crashing the website)

I was following some random YT tutorial on using Angular's $routeProvider and the result - contrary to the video - is not working for me. Instead, what I get is crashed website and this error logged in Chrome's console: Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=site&p1=Error%3A%20…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A41%3A249) By following the trail, I found that there's something wrong with `$routeProvider', but beats me if I know what. Here's my code:
var site = angular.module('site', []).
config(function($routeProvider){
$routeProvider.
when('/home', {template:'/pages/home.html'}).
when('/', {template:'/pages/home.html'}).
when('/in-play', {template:'/pages/in-play.html'}).
when('/popular', {template:'/pages/popular.html'}).
otherwise({redirectTo:'/home', tempalte:'/pages/home.html'});
});
function MainCtrl($scope, $location) {
$scope.setRoute = function(route) {
$location.path(route);
};
};
And here are all the HTMLs (I'm working with ng-include also):
<!DOCTYPE html>
<html ng-app="site">
<head>
<link rel="stylesheet" href="css/style.css">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="scripts/app.js"></script>
<title>Pre-Demo</title>
</head>
<body ng-controller="mainStaysCtrl">
<header class="header" ng-include="'pages/header.html'"></header>
<nav class="nav" ng-include="'pages/nav.html'"></nav>
<div class="main">
<div class="left-col">
<div class="quick links" ng-include="'pages/quick_links.html'"> </div>
<div class="quick-inplay links" ng-include="'pages/quick_inplay_links.html'"></div>
<div class="winner links" ng-include="'pages/winner_links.html'"></div>
</div>
<div class="center-col" ng-controller="mainCtrl">
<div class="wraper" ng-view ng-controller="jsonCtrl"></div>
</div>
<div class="right-col">
<div class="expert-mixer" ng-include="'pages/mixer.html'"></div>
<div ng-include="'pages/twitter.html'"></div>
</div>
</div>
</body>
</html>
//included page that has the call for $routeProvider
<div class="events">
<div class="bullet">
<div class="bullet-padding">
<div ng-click="setRoute('in-play')" class="bullet-link">In-Play Links</div>
</div>
</div>
</div>
Could someone please tell me what's wrong?
EDIT
After Antiga's answer I got it to load the page. Everything besides the content that is to be loaded with ng-view and for which $routeProvider was set up in the first place. Here's the updated code:
var site = angular.module('site', ['ngRoute']).
config(function($routeProvider){
$routeProvider.
when('/home', {templateUrl:'/pages/home.html'}).
when('/', {templateUrl:'/pages/home.html'}).
when('/in-play', {templateUrl:'/pages/in-play.html'}).
when('/popular', {templateUrl:'/pages/popular.html'}).
otherwise({redirectTo:'/home', tempalteUrl:'/pages/home.html'});
});
site.controller('mainStaysCtrl', function($scope) {
$scope.setRoute = function(route) {
$location.path(route);
};
});
and HTML
<body ng-controller="mainStaysCtrl">
<header class="header" ng-include="'pages/header.html'"></header>
<nav class="nav" ng-include="'pages/nav.html'"></nav>
<div class="main">
<div class="left-col">
<div class="quick links" ng-include="'pages/quick_links.html'"></div>
<div class="quick-inplay links" ng-include="'pages/quick_inplay_links.html'"></div>
<div class="winner links" ng-include="'pages/winner_links.html'"></div>
</div>
<div class="center-col">
<div class="wraper" ng-view ></div>
</div>
<div class="right-col">
<div class="expert-mixer" ng-include="'pages/mixer.html'"></div>
<div ng-include="'pages/twitter.html'"></div>
</div>
</div>

You are not including the routing module.
Read up on this here so that you actually understand it first: https://docs.angularjs.org/api/ngRoute
Add this after you include angular.min.js:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
And then include the dependency in your main app module:
var site = angular.module('site', ['ngRoute']).

Okay, I got it working beyond Antiga's help.
There was few (yet minor) problems. I had to extend templateUrl path to include project folder.
when('/home', {templateUrl: '/ProjectName/pages/home.html', controller: 'mainStaysCtrl'}).
Other thing is that I simply forgot to include $location in controller.
site.controller('mainStaysCtrl', function($scope, $location) {
$scope.setRoute = function(route) {
$location.path(route);
};
});

AngularJS Undefined Variables When Trying To Update View From Controller

I am new to AngularJS and am trying to rewrite my webpage in the "angular way" instead of using jquery but I am running into some problems with my understanding.
I have my HTML like so:
<body style="padding-top: 0px;" data-spy="scroll" ng-app="SummerMill">
<section id="intro" class="main style1 dark">
<!-- Header -->
<header ng-controller="MainController" id="header">
<!-- Logo -->
<h1 id="logo">Summer Mill</h1>
<a ng-mouseover="locations()"
style="color:black;text-decoration:initial;"
id="logoii"
href="http://localhost/locations">Locations</a>
<!-- Nav -->
<nav id="nav">
<ul class="nav navbar-nav">
<li ng-repeat="headerLink in headerLinks"><a ng-init="content=headerLink.text" href="#{{content}}">{{content}}</a></li>
</ul>
</nav>
</header>
Then my controller:
app.controller('MainController', ['$scope', function($scope) {
$scope.headerLinks = [
{
text: 'Intro',
alternativeText: 'Arlington'
},
{
text: 'Wholesale',
alternativeText: 'New York'
}
];
$scope.locations = function() {
content = headerLinks.alternativeText;
}
}]);
So basically, on hover, I want the <li> content to change. I know the hover event is being fired, and correctly so. The error I get is that ReferenceError: headerLinks is not defined which is odd to me because it is in the controller itself, so I tried content = $scope.headerLinks.alternativeText; and that stopped the error but I guess content in the controller is not the same as content in ng-init.
What is the right way to do this? Perhaps I am thinking of this the wrong way.

For your case better a bit simplify your code like, for example use ng-if and flag isOver
angular.module('app',[])
.controller('MainController',function($scope){
$scope.headerLinks = [
{
text: 'Intro',
alternativeText: 'Arlington'
},
{
text: 'Wholesale',
alternativeText: 'New York'
}
];
$scope.locations = function() {
content = headerLinks.alternativeText;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- Header -->
<header ng-app="app" ng-controller="MainController" id="header">
<!-- Logo -->
<h1 id="logo">Summer Mill</h1>
<a ng-mouseover="isOver=true" ng-mouseout="isOver=false"
style="color:black;text-decoration:initial;"
id="logoii"
href="http://localhost/locations">Locations</a>
<!-- Nav -->
<nav id="nav">
<ul class="nav navbar-nav">
<li ng-repeat="headerLink in headerLinks">
<a ng-if="!isOver" href="#{{headerLink.text}}">{{headerLink.text}}</a>
<a ng-if="isOver" href="#{{headerLink.alternativeText}}">{{headerLink.alternativeText}}</a>
</li>
</ul>
</nav>
</header>
also you can you ternary operator instead ng-if like this
angular.module('app',[])
.controller('MainController',function($scope){
$scope.headerLinks = [
{
text: 'Intro',
alternativeText: 'Arlington'
},
{
text: 'Wholesale',
alternativeText: 'New York'
}
];
$scope.locations = function() {
content = headerLinks.alternativeText;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- Header -->
<header ng-app="app" ng-controller="MainController" id="header">
<!-- Logo -->
<h1 id="logo">Summer Mill</h1>
<a ng-mouseover="isOver=true" ng-mouseout="isOver=false"
style="color:black;text-decoration:initial;"
id="logoii"
href="http://localhost/locations">Locations</a>
<!-- Nav -->
<nav id="nav">
<ul class="nav navbar-nav">
<li ng-repeat="headerLink in headerLinks">
{{!isOver ? headerLink.text : headerLink.alternativeText}}
</li>
</ul>
</nav>
</header>
or even without condition like
angular.module('app', [])
.controller('MainController', function($scope) {
$scope.currentText = 'text';
$scope.headerLinks = [{
text: 'Intro',
alternativeText: 'Arlington'
}, {
text: 'Wholesale',
alternativeText: 'New York'
}];
$scope.locations = function() {
content = headerLinks.alternativeText;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- Header -->
<header ng-app="app" ng-controller="MainController" id="header">
<!-- Logo -->
<h1 id="logo">Summer Mill</h1>
<a ng-mouseover="currentText='alternativeText'" ng-mouseout="currentText='text'" style="color:black;text-decoration:initial;" id="logoii" href="http://localhost/locations">Locations</a>
<!-- Nav -->
<nav id="nav">
<ul class="nav navbar-nav">
<li ng-repeat="headerLink in headerLinks">
{{headerLink[currentText]}}
</li>
</ul>
</nav>
</header>

How to get Ember.js working?

I'm quite stuck and I don't know where I'm going wrong. I'm using the Inspiritas Bootstrap theme, and I wanted to use it in an Ember.js app.
I've been trying to read up, I can't seem to figure out what's going wrong - debugging didn't really help :(
My files are as follows:
app.js
app = Ember.Application.create();
app.IndexController = Ember.Controller.extend({
name : "Hassan Khan"
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>app</title>
<link href="inspiritas.css" rel="stylesheet">
</head>
<body>
<script src='../components/jquery/jquery.js'></script>
<script src="../js/jquery.tablesorter.js"></script>
<script src="../components/moment/moment.js"></script>
<script src="../components/highcharts.com/js/highcharts.src.js"></script>
<script src="../components/handlebars/handlebars.js"></script>
<script src="../components/bootstrap/js/bootstrap-dropdown.js"></script>
<script src="../components/bootstrap/js/bootstrap-collapse.js"></script>
<script src="../components/bootstrap/js/bootstrap-typeahead.js"></script>
<script src="../components/ember/ember.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Now I'm not quite sure where the application bit should go, but here it is:
application.html
<div class="navbar navbar-static-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">app</a>
<span class="tagline">Blah</span>
<div class="nav-collapse collapse" id="main-menu">
<div class="auth pull-right">
<img class="avatar" src="images/img.png">
<span class="name">{{ name }}</span><br/>
<span class="links">
Settings
Logout
</span>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row-fluid">
<div class="span9" id="content-wrapper">
<div id="content">
{{ outlet }}
</div>
</div>
</div>
</div>

application.html needs to be compiled by Ember.Handlebars. If you put its content between <script type="text/x-handlebars"> and </script> and place in the head or the body of your page, it will be automagically compiled and rendered for you.
It is also good practice to name your application variable App.
Your name should by moved to an App.ApplicationController if you want it to be rendered.
http://emberjs.com/guides would be a good starting point for creating an Ember Application. The new video from Tom Dale will definitely help you.
http://jsbin.com/aqokix/1

Categories

Resources