I cannot get the "posts" service to work in the "angular services" section of this tutorial from thinkster.io:
https://thinkster.io/mean-stack-tutorial/
Why won't the new posts show up when created? I used Yeoman to set up the app. Here is my code:
app.js
use strict';
/**
* #ngdoc overview
* #name meanStackTutorialApp
* #description
* # meanStackTutorialApp
*
* Main module of the application.
*/
angular.module('meanStackTutorialApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
})
.otherwise({
redirectTo: '/'
});
});
main.js
angular.module('mainMod').factory('posts', [function(){
var o = {
posts : []
};
return o;
}]);
var MainMod = angular.module('mainMod')
.controller('MainCtrl', ['$scope', 'posts', function ($scope, posts) {
$scope.posts = posts.posts;
$scope.incrementUpvotes = function(post) {
post.upvotes += 1;
};
$scope.addPost = function(){
if(!$scope.title || $scope.title === '') { return; }
$scope.posts.push({title: $scope.title,
link: $scope.link,
upvotes: 0});
$scope.title = '';
$scope.link = '';
};
}]);
main.html:
<div class="jumbotron">
</div>
<form ng-submit="addPost()">
<input type="text" placeholder="Title" ng-model="title"></input>
<br>
<input type="text" placeholder="Link" ng-model="link"></input>
<br>
<button type="submit">Post</button>
</form>
<div ng-repeat="post in posts | orderBy: '-upvotes'">
<span ng-click="incrementUpvotes(post)">^</span>
{{post.title}} -
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
upvotes: {{post.upvotes}}
</div>
<div class="row marketing">h
</div>
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">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
<style> .glyphicon-thumbs-up { cursor:pointer } </style>
</head>
<body ng-app="meanStackTutorialApp">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<div class="header">
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
<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" href="#/">meanStackTutorial</a>
</div>
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li><a ng-href="#/about">About</a></li>
<li><a ng-href="#/">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div ng-view=""></div>
</div>
<div class="footer">
<div class="container">
<p><span class="glyphicon glyphicon-heart"></span> from the Yeoman team</p>
</div>
</div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
!function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){
(A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g),
r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r)
}(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-X');
ga('send', 'pageview');
</script>
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<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-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/about.js"></script>
<script src="scripts/services/mainModServices.js"></script>
<!-- endbuild -->
</body>
</html>
Related
I'm using AngularJs 1.6.9 with ASP.NET Core 2.
The error is
The controller with the name 'pag1Controller' is not registered.
_Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">
<link href="~/css/ngDialog-master/css/ngDialog.css" rel="stylesheet">
<link href="~/css/ngDialog-master/css/ngDialog-theme-default.min.css" rel="stylesheet">
<script src="~/lib/angular-1.6.9/angular.js"></script>
<script src="~/lib/angular-1.6.9/angular-route.js"></script>
<script src="~/lib/ngDialog-master/js/ngDialog.js"></script>
<script src="~/lib/angular-1.6.9/angular-cookies.min.js"></script>
<script src="~/js/app/app.js"></script>
</head>
<body class="" ng-app="MyApp">
<div id="wrapper">
<nav class="navbar-default navbar-static-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav metismenu" id="side-menu">
<li>
<i class="fa fa-th-large"></i> <span class="nav-label">Pag:</span> <span class="fa arrow"></span>
<ul class="nav nav-second-level collapse">
<li>Pag1</li>
</ul>
<ul class="nav nav-second-level collapse">
<li>Pag2</li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="wrapper wrapper-content">
#RenderBody()
</div>
</body>
</html>
Home.cshtml:
#{
ViewData["Title"] = "Home Page";
}
<div ng-view>
</div>
<div ng-controller="homeController">
{{Message}}
</div>
<script src="~/js/app/controllers/homeController.js"></script>
app.js:
var app = angular.module("MyApp", ['ngCookies', 'ngDialog', 'ngRoute']);
app.config(function ($routeProvider) {
config.baseURL = "http://localhost/";
$routeProvider.when('/Pag1', {
templateUrl: config.baseURL + "Pag1/Index",
controller: 'pag1Controller'
})
$routeProvider.when('/Pag2', {
templateUrl: config.baseURL + "Pag2/Index",
controller: 'pag2Controller'
})
});
pag1.cshtml
<div ng-controller="pag1Controller">
Pag1
<button ng-click="onMensaje()">View alert</button>
<script type="text/ng-template" id="templateId">
<h1>Template heading</h1>
<p>Content goes here</p>
</script>
</div>
<script src="~/js/app/controllers/pag1Controller/pag1Controller.js"></script>
pag1Controller.js:
app.controller('pag1Controller', function ($scope, ngDialog) {
$scope.onMensaje = function () {
ngDialog.open({ template: 'templateId' });
};
});
You need to include the controller in the index.html file , so that controller gets registered when app loads,
<script src="~/js/app/app.js"></script>
<script src="~/js/app/controllers/pag1Controller/pag1Controller.js"></script>
Import that controller in your index.html file.
<script srs=".../pag1Controller"></script>
I want to have a fixed menu, this fixed menu is called: fixed_admin.html:
<!DOCTYPE html>
<!-- saved from url=(0069)https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/ -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="images/puzzle.png" />
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
<!-- <link rel="stylesheet" href="styles/angular-bootstrap-datepicker.css" /> --> <!-- penso di poterlo togliere -->
<link rel="stylesheet" href="styles/mainBoot.css">
<link rel="stylesheet" href="styles/scrollbar.css">
<link rel="stylesheet" href="styles/noscroll_numberfield.css">
<!-- <script src="scripts/emailchecker.js"></script> -->
<!-- <script src="scripts/angular-bootstrap-datepicker.js" charset="utf-8"></script> -->
<!-- <script src="scripts/number-directive.js"></script> -->
<script type="application/javascript"></script>
<title>Pannello Amministratore</title>
<!-- Bootstrap core CSS -->
<link href="./styles/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="./styles/dashboard.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style id="holderjs-style" type="text/css"></style></head>
<body ng-app="myApp" background="images/sfondoblu3.png">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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">FDDispenser</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Pannello Amministratore</li>
<li>Settings</li>
<li>Profile</li>
<li>Help</li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active">Mostra Dipendenti</li>
<li>Mostra Catalogo</li>
<li>Mostra Macchinette</li>
<li>Mostra Acquisti</li>
</ul>
<ul class="nav nav-sidebar">
<li class="active">Aggiungi/Modifica Dipendente</li>
<li>Crea/Modifica Catalogo</li>
<li>Aggiungi/Modifica Famiglia</li>
<li>Aggiungi/Modifica Categoria</li>
<li>Aggiungi/Modifica Produttore</li>
<li>Aggiungi/Modifica Ingrediente</li>
<li>Aggiungi/Modifica Fabbrica di produzione</li>
<li>Aggiungi/Modifica Macchinetta</li>
<li>Aggiungi/Modifica Tipologia Macchinetta</li>
<li>Aggiungi/Modifica Accessori</li>
</ul>
<ul class="nav nav-sidebar">
<li>Assegna Macchinetta a Dipendente</li>
<li>Posiziona Macchinetta sul Territorio</li>
<li>Assegna Prodotti a Macchinetta</li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<div ng-view></div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- <script src="./Dashboard Template for Bootstrap_files/jquery.min.js.download"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.js"></script> -->
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<script src="scripts/main-admin.js"></script>
<script src="scripts/jquery.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script src="./scripts/bootstrap.min.js.download"></script>
<script src="./scripts/docs.min.js.download"></script>
</body></html>
When I click on "Mostra Dipendenti" I want to see in the middle of the same page another page (in ), using ng-route from this js page called main-admin.js:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "home_admin.html"
})
.when("/showemp", {
templateUrl : "show_employee.html"
})
.when("/paris", {
templateUrl : "paris.htm"
});
});
The page that I want to see when I click that button is "show_employee.html":
<body ng-app="StaffManagement" ng-controller="StaffController">
<h2 class="sub-header" style="color:#4e67c3;">Elensco dipendenti</h2>
<div class="table-responsive">
<table id="thetable">
<tr>
<th class="th2">Nome</th>
<th class="th2">Cognome</th>
<th class="th2">Data di Nascita</th>
<th class="th2">Telefono</th>
<th class="th2"> Sesso </th>
<th class="th2"> StaffId </th>
<th class="th2">Email</th>
</tr>
<tr ng-repeat="staff in staffs">
<td> {{ staff.name }}</td>
<td> {{ staff.surname }}</td>
<td> {{ staff.birthDate }}</td>
<td> {{ staff.phone }}</td>
<td>
<div ng-switch on="staff.gender">
<span ng-switch-when="true">Uomo</span>
<span ng-switch-when="false">Donna</span>
</div>
</td>
<td> {{ staff.idstaff }}</td>
<td> {{ staff.staffLogin.email }}</td>
</tr>
</table>
</body>
<script src="./scripts/bootstrap.min.js.download"></script>
<script src="./scripts/docs.min.js.download"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.js"></script> -->
<script src="scripts/deployeePanel.js"></script>
<script src="scripts/rest-services.js"></script>
<script src="scripts/jquery.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script src="scripts/angular.js"></script>
<!-- <script src="scripts/emailchecker.js"></script> -->
<script src="scripts/angular-bootstrap-datepicker.js" charset="utf-8"></script>
<!-- <script src="scripts/number-directive.js"></script> -->
<script type="application/javascript"></script>
If I open only show_employee.html it works well:
But when I open it from the button on fixed_admin.html, angular part is empty:
No error from the console:
I don't understand why angular doesn't work when I use ng-route. I want to see the element of the first image in fixed_admin.html#/showemp, but it is empty
Solved adding controller: "StaffController" and the controller in main-admin.js:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "home_admin.html"
})
.when("/showemp", {
templateUrl : "provaEmp.html",
controller: "StaffController"
})
.when("/paris", {
templateUrl : "paris.htm"
});
});
app.controller("StaffController", function($scope, $filter, $http) {
$scope.staffs = [];
$scope.staffLast = [];
$scope.staffForm = {
idstaff : -1,
staffType: {
idstaffType: 2,
type: "Dipendente"
},
name: "",
surname: "",
birthDate: "",
phone: "",
gender: true,
working: true,
staffLogin: {
idstaffLogin: -1,
email: "",
// pass: "",
}
};
$scope.staffLoginForm = {
idstaffLogin: -1,
email: "",
// pass: ""
};
$scope.selectg = [
{name:'uomo', type: true},
{name:'donna', type: false}
];
$scope.name = "Giacomo";
$scope.staffForm.name = "Giacomo";
$scope.staffForm.surname = "Brunetta";
$scope.staffForm.phone = "3222565625";
$scope.staffForm.idstaff = "1";
$scope.staffForm.email = "asdasd#dasd.it";
});
Material design features not working while using Angular states.
My set up is as follows:
1. index.html contains all styles and scripts
2. layout.html contains elements of the page layout and UI-VIEW
3. and partial pages are the rest
index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title>Material Admin - Form basic</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="your,keywords">
<meta name="description" content="Short explanation about this website">
<link href='http://fonts.googleapis.com/css?family=Roboto:300italic,400italic,300,400,500,700,900' rel='stylesheet' type='text/css'/>
<link type="text/css" rel="stylesheet" href="css/bootstrap.css?1422792965" />
<link type="text/css" rel="stylesheet" href="css/materialadmin.css?1425466319" />
<link type="text/css" rel="stylesheet" href="css/font-awesome.min.css?1422529194" />
<link type="text/css" rel="stylesheet" href="css/material-design-iconic-font.min.css?1421434286" />
</head>
<body class="menubar-hoverable header-fixed ">
<!-- BEGIN JAVASCRIPT -->
<script src="js/Mdesign/jquery-1.11.2.min.js"></script>
<script src="js/Mdesign/jquery-migrate-1.2.1.min.js"></script>
<script src="js/Mdesign/bootstrap.min.js"></script>
<script src="js/Mdesign/spin.min.js"></script>
<script src="js/Mdesign/jquery.autosize.min.js"></script>
<script src="js/Mdesign/jquery.nanoscroller.min.js"></script>
<script src="js/Mdesign/App.js"></script>
<script src="js/Mdesign/AppNavigation.js"></script>
<script src="js/Mdesign/AppOffcanvas.js"></script>
<script src="js/Mdesign/AppCard.js"></script>
<script src="js/Mdesign/AppForm.js"></script>
<script src="js/Mdesign/AppNavSearch.js"></script>
<script src="js/Mdesign/AppVendor.js"></script>
<script src="js/Mdesign/Demo.js"></script>
<script src="js/Dependencies/angular.js"></script>
<script src="js/Dependencies/angular-ui-router.js"></script>
<script src="js/app.js"></script>
<!-- END JAVASCRIPT -->
</body>
</html>
Layout.html
<!-- HEADER BEGINS -->
<header id="header" >
<div class="headerbar">
<div class="headerbar-left">
<ul class="header-nav header-nav-options">
<li class="header-nav-brand" >
<div class="brand-holder">
<a href="">
<span class="text-lg text-bold text-primary">MATERIAL ADMIN</span>
</a>
</div>
</li>
<li>
<a class="btn btn-icon-toggle menubar-toggle" data-toggle="menubar" href="javascript:void(0);">
<i class="fa fa-bars"></i>
</a>
</li>
</ul>
</div>
</div>
</header>
<!-- HEADER ENDS -->
<!-- BASE BEGINS -->
<div id="base">
<div id="content">
<!-- SECTION BEGINS - our UI-VIEW goes here -->
<section>
<div class="container">
<div ui-view>
</div>
</div>
</section>
<!-- SECTION ENDS -->
</div>
<!-- BEGIN MENUBAR-->
<div id="menubar" class="menubar-inverse ">
<div class="menubar-fixed-panel">
<div>
<a class="btn btn-icon-toggle btn-default menubar-toggle" data-toggle="menubar" href="javascript:void(0);">
<i class="fa fa-bars"></i>
</a>
</div>
<div class="expanded">
<a href="../../html/dashboards/dashboard.html">
<span class="text-lg text-bold text-primary ">MATERIAL ADMIN</span>
</a>
</div>
</div>
<div class="menubar-scroll-panel">
<!-- BEGIN MAIN MENU -->
<ul id="main-menu" class="gui-controls">
<li>
<a href="">
<div class="gui-icon"><i class="md md-home"></i></div>
<span class="title">Dashboard</span>
</a>
</li>
<li class="gui-folder">
<a>
<div class="gui-icon"><i class="md md-email"></i></div>
<span class="title">Email</span>
</a>
</li>
</ul>
<!-- END MAIN MENU -->
<!-- FOOTER COPYRIGHT BEGINS-->
<div class="menubar-foot-panel">
<small class="no-linebreak hidden-folded">
<span class="opacity-75">Copyright © 2014</span> <strong>Vinayak</strong>
</small>
</div>
<!-- FOOTER COPYRIGHT ENDS -->
</div>
</div>
<!-- END MENUBAR -->
</div>
<!-- END BASE -->
app.js
var app = angular.module('myApp', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('index', {
url: '',
templateUrl: 'index.html'
})
.state('layout', {
url: '',
templateUrl: 'pages/layout.html'
})
.state('page1', {
url: '/page1',
templateUrl: 'pages/page1.html'
})
.state('page2', {
url: '/page2',
templateUrl: 'pages/page2.html'
})
});
I know its late, but just had the same issue and maybe can help someone else.
Using Material Design Lite in an Angular app (1.x) with nested views (courtesy of ui-router), not all the MDL components display correctly in the nested views - but it works ok if you place it all in the index file.
adding the following to your angular.run function ensures the components get rendered correctly:
app.run(function($rootScope, $timeout) {
// Required so that MDL components render correctly when using nested views
$rootScope.$on('$viewContentLoaded', function() {
$timeout(function() {
componentHandler.upgradeAllRegistered();
})
})
http://yeoman.io/codelab/write-app.html
I am following this yeoman tutorial. But it doesnt work same.
It doesnt add new todo in to the $scope.todos And I couldnt find why.
You can also find code here:
http://www.beratuslu.com/share/mytodo.rar
What I noticed is, after I clicked submit button it comes in $scope.addTodo function but with empty value. So value is not coming from the form, instead inside of MainCtrl so, kind of there is no link between form and MainCtrl.
Whats wrong?
Thank you..
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">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<!-- endbuild -->
</head>
<body ng-app="mytodoApp">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<div class="header">
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
<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" href="#/">mytodo</a>
</div>
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li><a ng-href="#/">About</a></li>
<li><a ng-href="#/">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div ng-include="'views/main.html'" ng-controller="MainCtrl"></div>
</div>
<div class="footer">
<div class="container">
<p><span class="glyphicon glyphicon-heart"></span> from the Yeoman team</p>
</div>
</div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
!function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){
(A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g),
r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r)
}(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-X');
ga('send', 'pageview');
</script>
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<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>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<!-- endbuild -->
</body>
</html>
main.html
<div class="container">
<h2>My todos</h2>
<!-- Todos input -->
<form role="form" ng-submit="addTodo()">
<div class="row">
<div class="input-group">
<input type="text" ng-model="todo" placeholder="What needs to be done?" class="form-control">
<span class="input-group-btn">
<input type="submit" class="btn btn-primary" value="Add">
</span>
</div>
</div>
</form>
<br>
<p class="form-group" ng-repeat="todo in todos">
<input type="text" ng-model="todo" class="form-control">
</p>
</div>
app.js
'use strict';
/**
* #ngdoc overview
* #name mytodoApp
* #description
* # mytodoApp
*
* Main module of the application.
*/
angular
.module('mytodoApp', []);
main.js
'use strict';
/**
* #ngdoc function
* #name mytodoApp.controller:MainCtrl
* #description
* # MainCtrl
* Controller of the mytodoApp
*/
angular.module('mytodoApp')
.controller('MainCtrl', function ($scope) {
$scope.todos = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];
$scope.todo="new todo";
$scope.addTodo = function () {
console.log($scope.todo);//empty
$scope.todos.push($scope.todo);
//$scope.todo = '';
};
});
I found the problem. It must be deprecated to use ng-controller directive with ng-include. So I removed it from there and put it in to main html.
<div class="container" ng-controller="MainCtrl">
<h2>My todos</h2>
<!-- Todos input -->
<form role="form" ng-submit="addTodo()">
<div class="row">
<div class="input-group">
<input type="text" ng-model="todo" placeholder="What needs to be done?" class="form-control">
<span class="input-group-btn">
<input type="submit" class="btn btn-primary" value="Add">
</span>
</div>
</div>
</form>
<br>
<p class="form-group" ng-repeat="todo in todos">
<input type="text" ng-model="todo" class="form-control">
</p>
</div>
I am using the Yeoman scaffolding to create an Angular app and I am having some trouble adding a controller. The about and main controllers are added automatically and work fine. But when I try to add my own controller for a new view, it just shows {{name}}. thanks for your help!Here's the code:
user.js (the one I'm trying to add)
'use strict';
/**
* #ngdoc function
* #name classSiteApp.controller:UserController
* #description
* # UserController
* Controller of the classSiteApp
*/
angular.module('classSiteApp')
.controller('UserController', function ($scope) {
$scope.name='Hello';
});
app.js
'use strict';
/**
* #ngdoc overview
* #name classSiteApp
* #description
* # classSiteApp
*
* Main module of the application.
*/
angular
.module('classSiteApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
})
.when('/user', {
templateUrl: 'views/user.html',
controller: 'UserController'
})
.otherwise({
redirectTo: '/'
});
});
main.js
'use strict';
/**
* #ngdoc function
* #name classSiteApp.controller:MainCtrl
* #description
* # MainCtrl
* Controller of the classSiteApp
*/
angular.module('classSiteApp')
.controller('MainCtrl', function ($scope) {
$scope.name='Hello';
});
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">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
</head>
<body ng-app="classSiteApp">
<div class="header">
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
<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" href="#/">MrCooleyMathMan</a>
</div>
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a ng-href="#/">Courses</a></li>
<li><a ng-href="#/user">Create Account</a><li>
<li>Login</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div ng-view=""></div>
</div>
<div class="footer">
<div class="container">
<div class="col-sm-6 ">
<p><span class="glyphicon glyphicon-heart"></span> Thanks for visting my page</p>
</div>
<div class="col-sm-6">
<ul class="list-unstyled">
<li><strong>Matthew Cooley</strong></li>
<li>mcooley#dtechhs.org</li>
</ul>
</div>
</div>
</div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
!function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){
(A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g),
r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r)
}(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-X');
ga('send', 'pageview');
</script>
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<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-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/about.js"></script>
<!-- endbuild -->
</body>
</html>
I think you need to add your user.js file as a script reference at the end of your index.html like this:
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/about.js"></script>
<script src="your/path/to/user.js"></script>