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. And I understand how it works.but I want to arrange the views in one page, so I learn to use angular-ui-router. Finally I made it place all view in on page, when I tried to add another controller in these different views, the issue came out.It didn't work. Thank you for help!
(Sorry, I don't have enough reputation to post an image, so please the links to see the detils)
This pic demonstrate what I what to do.enter image description here
here is my code.enter image description here
index.html
<!doctype html>
<html>
<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 -->
</head>
<body ng-app="angularApp">
<!--[if lte IE 8]>
<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="#/">angular</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-fluid">
<div ui-view=""></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','https://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-aria/angular-aria.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-messages/angular-messages.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="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/menus/plan.js"></script>
<!-- endbuild -->
</body>
</html>
app.js
'use strict';
angular
.module('angularApp', [
'ngAnimate',
'ngAria',
'ngCookies',
'ngMessages',
'ngResource',
'ngSanitize',
'ngTouch',
'ui.router'
])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/index');
$stateProvider
.state('index', {
url: '/index',
views: {
'': {
templateUrl: 'views/index.html'
},
'planMap#index': {
templateUrl: 'views/menus/plan.html'
},
'3DManage#index': {
templateUrl: 'views/menus/3DManage.html'
},
'querys#index': {
templateUrl: 'views/menus/querys.html'
},
'layers#index': {
templateUrl: 'views/menus/layers.html'
},
'toolBar#index': {
templateUrl: 'views/toolBar.html'
},
'terraView#index': {
templateUrl: 'views/terraView.html'
}
}
});
});
index.html
<div class="FMenu">
<div ui-view="planMap" ></div>
<div ui-view="3DManage"></div>
<div ui-view="querys"></div>
<div ui-view="layers"></div>
</div>
<div class="main-view">
<div class="tool-bar" ui-view="toolBar"></div>
<div class="terra-view" ui-view="terraView"></div>
</div>
views/menus/plan.html
<div ng-controller='SomeController'>
<expander class='expander' expander-title='title'>
{{text}}
</expander>
</div>
controller/menus/plan.js
'use strict';
var angularApp = angular.module('angularApp', []);
angularApp.directive('expander', function() {
return {
restrict : 'EA',
replace : true,
transclude : true,
scope : {
title : '=expanderTitle'
},
template : '<div>' +
'<div class="title" ng-click="toggle()">{{title}}</div>' +
'<div class="body" ng-show="showMe" ng-transclude>' +
'</div>' +
'</div>',
link : function(scope) {
scope.showMe = false;
scope.toggle = function() {
scope.showMe = !scope.showMe;
};
}
};
});
angularApp.controller('PlanController',function($scope) {
$scope.title = '点击展开';
$scope.text = '这里是内部的内容。';
});
Related
I've created an AngularJS sandbox, so to speak. I used the template html provided by Bootstrap for setup speed purposes, and I plan on using Bootstrap to fancy it up the fast way. While setting everything up, I noticed that my routes aren't working properly. In my index.html file, I've tried placing my angular file in several places, but I don't believe that's the issue. I've also tried using <ng-view></ng-view>, instead of using a div. In app.js, I've tried renaming the route to the templateUrl from the root directory to the end file, app/home/home.html, along with many other configurations. When I load in my browser, all I get is my navigation menu. I don't even get the html from the templateUrl. I may be wrong about all of this, but I can't figure it out. I've placed a generic Bootstrap navigation in my index.html file for my initial set up. What could be my issue?
index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-route.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="home.html">Angular</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link" href="#">Home</a>
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link" href="#">Contact</a>
</div>
</div>
</nav>
<ng-view>
</ng-view>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="app/app.js"></script>
<script src="app/home/HomeController.js"></script>
</body>
</html>
app.js
var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when("/home", {
templateURL: "home.html",
controller: "HomeController"
})
.when("/about", {
templateURL: "about.html",
controller: "AboutController"
})
.otherwise({redirectTo: "/home"});
});
HomeController.js
var app = angular.module('myApp');
app.controller('HomeController', function($scope){
$scope.noun = {
person: "Maximus Aurelius",
place: "World",
thing: "sword"
};
});
home.html
<div>
<h1>Hello {{noun.person}}</h1>
</div>
My Directory
Dev tools network
The path to the templates is relative to the main page. You are looking for the templates in the root where the page file is but they are in subdirectories:
Try:
$routeProvider
.when("/home", {
templateURL: "home/home.html",
controller: "HomeController"
})
.when("/about", {
templateURL: "about/about.html",
controller: "AboutController"
})
Looks like its just a typo in your $routeProvider. templateURL should just be templateUrl.
I'm developing Spring + Angular JS web application. Project has following structure:
app.state.js
(function() {
'use strict';
angular
.module('ftnApp')
.config(stateConfig);
stateConfig.$inject = ['$stateProvider'];
function stateConfig($stateProvider) {
$stateProvider.state('app', {
abstract: true,
views: {
'navbar#': {
templateUrl: 'app/layouts/navbar/navbar.html',
controller: 'NavbarController',
controllerAs: 'vm'
}
}
});
}})();
app.module.js
(function() {
'use strict';
angular
.module('ftnApp', [
'ngStorage',
'ngResource',
'ngCookies',
'ngAria',
'ngCacheBuster',
'ngFileUpload',
'ui.bootstrap',
'ui.bootstrap.datetimepicker',
'ui.router',
'infinite-scroll',
'angular-loading-bar'
]);})();
home.state.js
(function() {
'use strict';
angular
.module('ftnApp')
.config(stateConfig);
stateConfig.$inject = ['$stateProvider'];
function stateConfig($stateProvider) {
$stateProvider.state('home', {
parent: 'app',
url: '/',
data: {
authorities: []
},
views: {
'content#': {
templateUrl: 'app/home/home.html',
controller: 'HomeController',
controllerAs: 'vm'
}
}
});
}
})();
index.html
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>FTN</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- build:css content/css/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="bower_components/angular-loading-bar/build/loading-bar.css">
<!-- endinject -->
<!-- endbuild -->
<!-- build:css content/css/main.css -->
<link rel="stylesheet" href="content/css/main.css">
<!-- endbuild -->
</head>
<body ng-app="ftnApp" ng-strict-di>
<page-ribbon></page-ribbon>
<div ui-view="navbar" ng-cloak></div>
<div class="container">
<div class="well" ui-view="content">
<!-- Angular views -->
</div>
<div class="footer" ng-cloak>
<p data-translate="footer">This is your footer</p>
</div>
</div>
<!-- build:js app/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/json3/lib/json3.js"></script>
<script src="bower_components/messageformat/messageformat.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/angular-cache-buster/angular-cache-buster.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/ngstorage/ngStorage.js"></script>
<script src="bower_components/angular-loading-bar/build/loading-bar.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/bootstrap-ui-datetime-picker/dist/datetime-picker.js"></script>
<script src="bower_components/ng-file-upload/ng-file-upload.js"></script>
<script src="bower_components/ngInfiniteScroll/build/ng-infinite-scroll.js"></script>
<!-- endinject -->
<!-- endbuild -->
<!-- build:js app/app.js -->
<!-- inject:js -->
<script src="app/app.module.js"></script>
<script src="app/app.state.js"></script>
<script src="app/services/auth/register.service.js"></script>
<script src="app/services/auth/principal.service.js"></script>
<script src="app/services/auth/auth.session.service.js"></script>
<script src="app/services/auth/auth.service.js"></script>
<script src="app/services/auth/account.service.js"></script>
<script src="app/layouts/navbar/navbar.controller.js"></script>
<script src="app/home/home.state.js"></script>
<script src="app/home/home.controller.js"></script>
<script src="app/components/login/login.service.js"></script>
<script src="app/components/login/login.controller.js"></script>
<!-- endinject -->
<!-- endbuild -->
</body>
</html>
Problem is that states aren't recognized .When I go to http://localhost:8080/ nothing happens('This is your footer' only shows up). As far as I know, it should load navbar.html into ui-view navbar and home.html into ui-view content?
The problem is with your URL:
function stateConfig($stateProvider) {
$stateProvider.state('home', {
parent: 'app',
url: '/', //Change to ''
data: {
authorities: []
},
views: {
'content#': {
templateUrl: 'app/home/home.html',
controller: 'HomeController',
controllerAs: 'vm'
}
}
});
If the URL = '/' then you should access by http://localhost:8080/#/
Or see here how to make a default URL
If you specify a default page then there should be no problem.
function config($urlRouterProvider) {
// If user goes to a path that doesn't exist, redirect to '/'
$urlRouterProvider.otherwise('/');
}
Helo,
I am new to AngularJS, and I just started using $mdToast basic function Show(). Here is my complete code for this problem, hope you can help me.
'use strict';
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ngAnimate', 'ui.bootstrap', 'ngCookies',
'ngRoute', 'ngMaterial', 'ngAria', 'ngMessages',
'myApp.view0',
'myApp.view1',
'myApp.view2',
'myApp.version',
'myApp.view3',
'myApp.view4',
'myApp.view5',
'myApp.view6'
])
.run(function ($rootScope, $cookies, $http) {
$rootScope.loggedin = false;
$rootScope.loggedinUser = {};
var loginCredentials = $cookies.get('logincredentials');
$http.get('https://localhost:8181/WebApplicationStom/webresources/domain.login', {headers: {
Authorization: loginCredentials
}}).success(function (data) {
if (data.ime == '123') {
$rootScope.loggedinUser = data;
$rootScope.loggedin = true;
} else {
$rootScope.loggedin = false;
$rootScope.loggedinUser = {};
}
});
})
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view0'});
}])
.controller('LoginCtrl', ['$scope', '$uibModal', '$log', '$rootScope', '$http', '$cookies', '$mdToast', function ($scope, $uibModal, $log, $rootScope, $http, $cookies, $mdToast) {
$scope.animationsEnabled = true;
$scope.username = '';
$scope.password = '';
$scope.dialogMessage;
$scope.logout = function () {
$rootScope.loggedinUser = {};
$rootScope.loggedin = false;
$cookies.remove('logincredentials');
}
$scope.login = function () {
if ($scope.username != '' && $scope.password != '') {
$http.get('https://localhost:8181/WebApplicationStom/webresources/domain.login', {headers: {
Authorization: $scope.username + ':' + $scope.password
}}).success(function (data) {
if (data.ime == '123') {
$rootScope.loggedin = true;
$rootScope.loggedinUser = data;
$cookies.put('logincredentials', '1:1');
} else {
$rootScope.loggedin = false;
$rootScope.loggedinUser = {};
$scope.dialogMessage = 'Uneli ste pogresan username i/ili password';
}
});
} else {
$scope.dialogMessage = 'Unesite username i password';
}
}
$scope.open = function (size) {
$scope.modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
};
$scope.openToast = function () {
$mdToast.show('Hello!');
};
}])
.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items, $rootScope) {
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Stomatoloska ordinacija</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ui-grid.info/release/ui-grid.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ui-grid.info/release/angular-ui-grid/ui-grid.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-cookies.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<nav class="navbar navbar-default ">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#/view0">Home</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Mesto</li>
<li>Lekar</li>
<li>Pacijent</li>
<li>Usluga</li>
<li>Poseta</li>
<li>view6</li>
</ul>
<div ng-controller="LoginCtrl">
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Login/Logout</li>
<li><a ><span class="glyphicon glyphicon-user"></span> {{loggedinUser.user}}</a></li>
</ul>
</div>
</div>
</div>
</nav>
<!--[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]-->
<div class="page">
<md-button class="md-raised md-primary">Primary</md-button>
<div ng-controller="LoginCtrl" >
<md-button ng-click="openToast()">
Open a Toast!
</md-button>
<script type="text/ng-template" id="myModalContent.html">
<div ng-controller="LoginCtrl">
<div class="container">
<div id="loginbox" class="mainbox col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3">
<button type="button" class="close" data-dismiss="modal" ng-click="cancel()"><span aria-hidden="true">×</span></button>
<div class="panel panel-default" >
<div class="panel-heading">
<div class="panel-title text-center">Login/Logout</div>
</div>
<div class="panel-body" >
<form name="form" id="form" class="form-horizontal" enctype="multipart/form-data" method="POST">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="user" type="text" class="form-control" name="user" value="" placeholder="User" ng-model="username">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="password" type="password" class="form-control" name="password" placeholder="Password" ng-model="password">
</div>
<div class="form-group">
<!-- Button -->
<div>
<h4>{{dialogMessage}}</h4>
</div>
<div class="col-sm-12 controls">
<button type="button" class="btn btn-danger" ng-click="cancel();logout();"><i class="glyphicon glyphicon-log-in"></i> Logout</button>
<button type="button" class="btn btn-primary pull-right" ng-click="cancel();login()"><i class="glyphicon glyphicon-log-in"></i> Login</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</script>
</div>
<div class="footer navbar-fixed-bottom">
<div id="footer">Angular seed app: v<span app-version></span></div>
</div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-aria.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-messages.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="view0/view0.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="view3/view3.js"></script>
<script src="view4/view4.js"></script>
<script src="view5/view5.js"></script>
<script src="view6/view6.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
</body>
</html>
So the problem is not with the libraries included, i tried that and it didnt work. I should also mention that I am using angularJS seed as a child of project.
Thank you for your time.
Toast require modules ngMaterial', 'ngMessages'. I think you should get rid of assets-cache.js which is used by ngmaterial in default in codepen sample . In assets-cache.js you have a "MyApp" module defined in it . and redefining this module again in your file gives error.Try avoiding file and add ngMaterial', 'ngMessages' module dependencies to your module . This should definitely solve your problem.
Here is a sample codepen
Just click on "Settings" button on codepen, go to javascript tab and make sure you've got all of these dependencies included in your html.
Error tells you don't have it imported properly.
The toast is probaly displayed behind another element. Use parent to append your toast to an HTML element:
$scope.showSimpleToast = function () {
$mdToast.show($mdToast.simple().textContent('Hello!').parent("#HTMLelemID"));
};
parent() appends toast to the root element of the application by default.
Access $mdToast documentation here
I'm a beginner in Angular and I have a problem with the functions. I have a simple code. In that there are two alerts to probe they are not getting called.
HTML
<div data-ng-controller="MainCtrl">
<form novalidate class="simple-form">
Last name:
<input type="text" name="lname" data-ng-model="product.name"><br>
<input type="submit" value="Submit" class="btn btn-sm btn-primary" data-ng-click="mandar()" >
</form>
<button ng-click="mandar()">Remove</button>
</div>
My JavaScript:
var app =angular.module('pdbApp');
app.controller('MainCtrl', function ($scope, $window) {
$window.alert('I am here!');
$scope.mandar=function(){
$window.alert('Hi there!');
};
});
I also have the app.js
angular
.module('pdbApp', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
})
.otherwise({
redirectTo: '/'
});
});
And also my index.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="styles/main.css">
<!-- endbuild -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- endbuild -->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script>
</head>
<body ng-app="pdbApp">
<div class="container">
<div data-ng-view=""></div>
</div>
<!-- Libraries -->
<script src="js/angular.min.js"></script>
<script src="js/ui-bootstrap-tpls-0.11.2.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/angular-animate.min.js"></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-sass-official/assets/javascripts/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 -->
<!-- Some Bootstrap Helper Libraries -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/underscore.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
When I press the mandar button doesn't happen anything.
Can anybody tell me why it is no working?
Seems like you add ng-app="pdbApp" on your page to tell angular to run on the page. Also make sure you have added the angular.js file on the page.
Markup
<div ng-app="pdbApp" data-ng-controller="MainCtrl">
<form novalidate class="simple-form">
Last name: <input type="text" name="lname" data-ng-model="product.name"><br>
<input type="submit" value="Submit" class="btn btn-sm btn-primary" data-ng-click="mandar()" >
</form>
</div>
without any stack trace all we can do is speculate. But as others have said you need to include ng-app within your template so angular knows the scope of the HTML for that app. Also you need ng-controller so angular knows the scope of your controller in the HTML.
However these are all basic things covered in all tutorials, the thing your doing that isn't covered in most is your app definition. This will cause your app to fail if it isn't intentional.
Your doing
var app =angular.module('pdbApp');
This tells angular 'find me an existing application called pdbApp'. However is this is your first decliration of that app your need to tell angular to create it.
You do that by adding an array:
var app =angular.module('pdbApp', []);
The array contains a list of application dependencies if you have any.
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