I wrote the following AngularJS routing code and it's not working:
/// <reference path="C:\Users\elwany\documents\visual studio 2015\Projects\spaapplication\spaapplication\scripts/angular.js" />
var myApp = angular.module("myApp", ['ngRoute']);
myApp.config(['$routeProvider',
function($routeProvider){
$routeProvider.
when('/add',{templateurl:'Views/add', controller:'addController'}).
when('/edit',{templateurl:'Views/edit', controller:'editController'}).
when('/delete',{templateurl:'Views/delete', controller:'deleteController'}).
when('/home',{templateurl:'Views/home', controller:'homeController'}).
otherwise({redirectTo :'/home'});
}]);
myApp.controller('addController',function($scope){
$scope.message="in Add view Controller";
});
myApp.controller('editController',function($scope){
$scope.message="in edit view Controller";
});
myApp.controller('deleteController',function($scope){
$scope.message="in delete view Controller";
});
myApp.controller('homeController',function($scope){
$scope.message="in home view Controller";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title></title>
<meta charset="utf-8" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="scripts/jquery-1.9.0.js"></script>
<script src="scripts/bootstrap.js"></script>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="demo.js"></script>
</head>
<body>
<div class="container">
<nav style="background-color:darkslateblue" role="navigation" class="nav navbar-inverse">
<ul class="nav navbar-nav">
<li class="active">home</li>
<li>add</li>
<li>edit</li>
<li>delete</li>
</ul>
</nav>
<div ng-view>
</div>
<h3 style="font-size:small" class="text-center text-info">developed by Mr-Mohammed Elwany</h3>
</div>
</body>
</html>
And another 4 html <div> in separated 4 HTML pages (add, edit, delete, home) implement this code:
<div class="row jumbotron">
<h2>{{message}}</h2>
</div>
The references should come inside the <body> tag , also you are missing the reference for angular-route
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
</head>
DEMO APP
Related
CodePen:
https://codepen.io/raynerprogramming/project/editor/ArNmxN/
I'm trying to split out my header into a separate HTML file and include it with ng-include. However, I can't seem to get the sideNav() call to actually work in this setup. If I bring the header.html file into the index.html. It works as intended.
I've tried various events to hook into before calling the sideNav() without any luck.
angular.element(document).ready(function () {})
$rootScope.$on("$includeContentLoaded", function(event,
templateName){}); plain jquery $(function() {})
The codepen also includes the working copy, index_working.html.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
<title>Test</title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="/app.js"></script>
</head>
<body ng-app="app" ng-controller="testController">
<div ng-include="'header.html'"></div>
HELLO WORLD
</body>
<script></script>
</html>
header.html:
<nav class="grey darken-3" role="navigation">
<div class="nav-wrapper container">
<ul class="right hide-on-med-and-down">
<li><a class="dropdown-button" href="#!" data-activates="srvDropdown">Test<i class="material-icons right">arrow_drop_down</i></a></li>
<li>{{data}}</li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li>Home</li>
<li class="divider"></li>
<li>test</li>
</ul>
<i class="material-icons">menu</i>
</div>
<!-- Dropdown Structure -->
<ul id="srvDropdown" class="dropdown-content">
<li>TEST</li>
</ul>
</nav>
Angular:
var app = angular.module('app',[])
.controller('testController',function($scope){
$scope.data='test';
$scope.init = function(){
$(function () {
$('.button-collapse').sideNav();
});
}
$scope.init();
});
I have written an angular js program and I have written the controller in a different file but I am getting the error saying that controller is not registered. can someone let me know why i am getting this.
<html ng-app>
<head>
<title>The angular book libraty</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="app.css">
</head>
<body>
<div id="header-wrapper" ng-controller="HeaderCntrl">
<span class="logo pull-left">{{appDetails.title}}</span>
<span class="tagline pull-left">{{appDetails.tagline}}</span>
<div class="nav-wrapper pull-left">
<ul class="nav nav-pills">
<li class="active">Book</li>
<li>Kart</li>
</ul>
</div>
</div>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="angular.min.js"></script>
</body>
</html>
And the controller code, that is written in the separate js file.
var HeaderCntrl = function($scope){
$scope.appDetails = {
title : "BookKart",
tagline : "The collection of a million books"
};
}
Your controller is just a function. You need to use a module to create it. An example from ng docs:
var myApp = angular.module('myApp',[]);
myApp.controller('GreetingController', ['$scope', function($scope) {
$scope.greeting = 'Hola!';
}]);
And then
<div ng-controller="GreetingController">
{{ greeting }}
</div>
order of injected js file is wrong
change this
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="angular.min.js"></script>
to
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
this demo is your post. just change order of injected file.
Demo
I was following an old module for reference without being aware of it and the app was working fine in the guide I was using, I guess it is deprecated now. I used following code to get the proper output.
<html ng-app="myApp">
<head>
<title>The angular book libraty</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="app.css">
</head>
<body>
<div id="header-wrapper" ng-controller="myCtrl">
<span class="logo pull-left">{{ title }}</span>
<span class="tagline pull-left">{{tagline}}</span>
<div class="nav-wrapper pull-left">
<ul class="nav nav-pills">
<li class="active">Book</li>
<li>Kart</li>
</ul>
</div>
</div>
<script src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
the external js file I used for the controller is as follows.
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.title = "BookKart";
$scope.tagline = "We have a million book with us";
});
If I try to reference angular material I am getting the error: Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.21/$injector/modulerr?. If i remove the reference the code is working fine, why is that?
Thank you in advance for the help.
This is my main layout page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - Register</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body data-ng-app="main">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
#Html.ActionLink("Register", "Index", "Home",new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Customers", "Customer","Home")
</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year</p>
</footer>
</div>
#Scripts.Render("~/bundles/angular")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
<script type="text/javascript">
window.MyApp = {};
MyApp.rootPath = '#Url.Content("~")';
</script>
<script src="~/App/Validator.js"></script>
<script src="~/App/App.js"></script>
#RenderSection("scripts", required: false)
<script type="text/javascript">
#RenderSection("jsCode", required: false)
</script>
</body>
</html>
And this is App.js
var commonModule = angular.module('common', ['ngRoute']);
var mainModule = angular.module('main', ['common', 'ngMaterial']);
BundleConfig.cs
bundles.Add(new ScriptBundle("~/bundles/angular").Include(
"~/Scripts/angular.js",
"~/Scripts/angular-route.js",
"~/Scripts/angular-material.js"));
I have write this "factory" in angularjs
var SimpleHomeCosts=angular
.module('SimpleHomeCosts', [
'ngRoute'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/buys.html',
controller: 'BuysCtrl'
})
.when('/utenti', {
templateUrl: 'views/users.html',
controller: 'UsersCtrl'
})
.when('/negozi', {
templateUrl: 'views/shops.html',
controller: 'ShopsCtrl'
})
.otherwise({
redirectTo: '/'
});
})
.factory("Shop", function () {
var shop={};
return shop;
});
After in my controller I use my "Shop" class factory
SimpleHomeCosts.controller("ShopsCtrl", function ($scope,Shop) {
//================Shops Controller================
console.log(Shop,"shop");
});
this is html (Controller) shops.html
<div ng-controller="ShopsCtrl"></div>
this is index.html
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<script src="//angular.localhost:9000/livereload.js"></script>
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
</head>
<body ng-app="SimpleHomeCosts">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
your browser</a> to improve your experience.</p>
<![endif]-->
<div class="container" style="border: 0px solid blue">
<div class="row">
<div class="header" style="border: 0px solid green">
<ul class="nav nav-pills pull-right">
<li class="active"><a ng-href="#">Home</a></li>
<li><a ng-href="#/utenti">Utenti</a></li>
<li><a ng-href="#/spese">Spese</a></li>
<li><a ng-href="#/negozi">Negozi</a></li>
</ul>
</div>
</div>
<!-- container view -->
<div class="row" style="border: 0px solid red">
<div ng-view="" class="col-lg-12 col-md-12 col-xs-12"></div>
</div>
<div class="footer">
<!-- <p><span class="glyphicon glyphicon-heart"></span> from the Yeoman team</p> -->
</div>
</div>
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="/bower_components/angular-route/angular-route.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers/ShopsCtrl.js"></script>
</body>
</html>
If I read into console browser I see:
Object { } shop ShopsCtrl.js (riga 29)
Object { } shop ShopsCtrl.js (riga 29)
Why if I ask only one time the "Shop" angular duplicates my call?
I must remove "ng-controller="ShopsCtrl" from file shops.html
I'm using Zurb's Foundation, attempting to build a FAQ page using the accordion js. But it's not working and I have no idea why. All the js files are in the js folder. Here's my whole page:
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/app.css">
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div class="row row-padding">
<div class="small-12 columns">
<h1>FAQ:<h1>
</div>
</div>
<div class="row row-padding small-12">
<ul class="accordion" data-accordion>
<li class="accordion-navigation">
Question
<div id="panel13a" class="content">
Answer
</div>
</li>
</ul>
</div>
<script>
$('#myAccordionGroup').on('toggled', function (event, accordion) {
console.log(accordion);
});
</script>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.accordion.js"></script>
</body>
</html>
I'm brand new to HTML websites, so sorry if it's something stupid.
You are targeting your accordion with an id that doesn't exist in your HTML.
You'll need to add the id to your HTML like this:
<div class="row row-padding small-12">
<ul id="myAccordionGroup" class="accordion" data-accordion>
<li class="accordion-navigation">
Question
<div id="panel13a" class="content">
Answer
</div>
</li>
</ul>
</div>
Also change the order of your scripts so that your custom accordion loads after everything else.
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.accordion.js"></script>
<script>
$(document).foundation();
$('#myAccordionGroup').on('toggled', function (event, accordion) {
console.log(accordion);
});
</script>
Here is a working CodePen: http://codepen.io/anon/pen/jPmRyB
You forgot about $(document).foundation();
http://foundation.zurb.com/docs/javascript.html - Initialize Foundation