Javascript not accessible from inside Angular ui-view - javascript

I have a main template (index.html) with an Angular ui-view. Inside this main template I import a bunch of Javascript files. I expect these files to be available to the content inside the html templates that will be loaded inside the ui-view, but the JS functions are seemingly inaccessible.
/sample-app/index.html:
<html ng-app="otr">
<head></head>
<body>
<div ui-view></div>
<!-- JS imports -->
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Angular Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.0-rc.1/angular-route.min.js"></script>
<script src="https://code.angularjs.org/1.4.0-rc.1/angular-cookies.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.14/angular-ui-router.min.js"></script>
<!-- Custom scripts -->
<script src="/sample-app/js/login.js"></script>
<!-- Angular app scripts -->
<script src="app/app.js"></script>
<script src="app/services/authentication.service.js"></script>
<script src="app/services/flash.service.js"></script>
<script src="app/common/cases-model.js"></script>
<script src="app/home/home.controller.js"></script>
<script src="app/login/login.controller.js"></script>
<script src="app/register/register.controller.js"></script>
</body>
</html>
/sample-app/js/login.js
$(function() {
$('#login-form-link').click(function(e) {
$("#login-form").delay(100).fadeIn(100);
$("#register-form").fadeOut(100);
$('#register-form-link').removeClass('active');
$(this).addClass('active');
e.preventDefault();
});
$('#register-form-link').click(function(e) {
console.log('Inside login.js REGISTER');
$("#register-form").delay(100).fadeIn(100);
$("#login-form").fadeOut(100);
$('#login-form-link').removeClass('active');
$(this).addClass('active');
e.preventDefault();
});
});
/sample-app/app/app.js:
(function () {
'use strict';
angular.module('otr', [
'ngRoute',
'ngCookies',
'ui.router',
])
.config(config)
.run(run);
function config($stateProvider, $urlRouterProvider, $httpProvider) {
$stateProvider
.state('otr', {
url: '',
abstract: true
})
.state('login', {
url: '/login',
controller: 'LoginController as vm',
templateUrl: 'app/login/login.view.html'
})
.state('register', {
url: '/register',
controller: 'RegisterController as vm',
templateUrl: 'app/register/register.view.html'
})
.state('home', {
url: '/',
controller: 'HomeController as vm',
templateUrl: 'pages/home2.view.html'
})
;
$urlRouterProvider.otherwise('/login');
$httpProvider.defaults.withCredentials = true;
}
function run($rootScope, $location, $cookies, $http) {
// keep user logged in after page refresh
$rootScope.globals = $cookies.get('globals') || {};
$rootScope.$on('$locationChangeStart', function (event, next, current) {
// redirect to login page if not logged in and trying to access a restricted page
var restrictedPage = $.inArray($location.path(), ['/login', '/register']) === -1;
var loggedIn = $rootScope.globals.currentUser;
if (restrictedPage && !loggedIn) {
$location.path('/login');
}
});
}
})();
The ui-view content loads just fine, but without the JS functions being called.
If I copy/paste the content directly into index.html, everything works as expected
If I place the JS import inside the partial template, that works as well.
What am I missing?

If you want to access stuff outside the , try to create a controller, something like this,
<body>
<div ng-controller="MainCtrl">
<div ui-view></div>
<script src="app/app.js"></script>
</div>
</body>

Without seeing your project structure it's hard to know for sure, but I suspect that you need to refer to your javascript files using absolute paths rather than relative paths.
EG:
<script src="/app/app.js"></script>
I say this because most AngularJS projects store their views in a sub-folder, and when the template gets loaded the relative paths become invalid because they are relative to the root of the project/index.html file and not the active view.

You should declare the app name using ng-app, then associate a controller with an element in the HTML. I would suggest this tutorial because you are missing few of the basics.
You need to do something like this:
<!DOCTYPE html>
<html ng-app="myapp" lang="en">
<head>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<div ng-controller="MyCtrl"></div>
</body>
</html>
app.js:
(function () {
var app = angular.module('myapp', []);
app.controller("MyCtrl", function($scope){
$scope.foo = function(){};
this.foo2 = function(){};
})
})();

Presumably, you have a statement somewhere in app.js that looks like this:
angular.module('MyApp', []);
You will need to manually bootstrap your application. If you have any ng-app= markup in your html, remove it -- make sure app.js is the very last script, and add the following to the end of app.js:
angular.element(document).ready(function() {
angular.bootstrap(document, ['MyApp']);
});
If you didn't have ng-app in your markup, then you wouldn't have seen anything anyway, as ng-app is the key that tells angular where it should integrate with your page. And ng-app should not be applied until all of the scripts are loaded.
But even if you had it, it still would have given you an error that the directive is not defined. The reason is that angular.js will begin executing as soon as it is loaded. But the code you've written which attaches the directive to your module has not gotten a chance to execute. Very specifically, it means that there is not yet a directive called 'ui-view' defined in your application.
The reason angular code seems to just work when you put it into index.html is that angular is kind enough to wait for the DOM to be ready before actually trying to hook up components, and that means that any inline scripts have already gotten a chance to execute.
Keep this bootstrapping trick in your bag, as you'll be using it often.

I gave up on trying to get the JavaScript to load and the ui-view to recognize it. I ultimately solved this by creating an Angular directive that duplicated the function of the JavaScript.
Directive:
angular.module('otr')
.directive('loginForm', loginFormDirective)
.directive('registerForm', registerFormDirective)
;
function loginFormDirective() {
return function(scope, element, attrs) {
element.bind('click', function() {
console.log('element: ', element[0].id);
console.log('attributes: ', attrs);
$('#' + attrs.loginForm).delay(100).fadeIn(100);
$("#register-form").fadeOut(100);
$('#register-form-link').removeClass('active');
$('#' + element[0].id).addClass('active');
})
}
}
function registerFormDirective() {
return function(scope, element, attrs) {
element.bind('click', function() {
$('#' + attrs.registerForm).delay(100).fadeIn(100);
$("#login-form").fadeOut(100);
$('#login-form-link').removeClass('active');
$('#' + element[0].id).addClass('active');
})
}
}
My view now has the following code snippet:
<div class="row">
<div class="col-xs-6">
Login
</div>
<div class="col-xs-6">
Register
</div>
</div>
Thanks to all of you who took the time to read my question and post answers!

This is a super late response, but I ran into this same exact issue myself. I have solved this by including the external js libraries before including Angular and Angular UI Router.
Just like the OP, my project consisted of an index.html as well as a ui-view. The partials load into the ui-view properly, but the external js libraries do not take effect inside the partial via ui-view. If the contents from the partial are placed into the index.html, everything works perfectly.
Scripts changed from
<!-- AngularJS -->
<script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="dist/components.js" type="text/javascript"></script>
<!-- Custom JS Libries -->
<script src="dist/js/custom.js" type="text/javascript"></script>
Scripts changed to
<!-- Custom JS Libries -->
<script src="dist/js/custom.js" type="text/javascript"></script>
<!-- AngularJS -->
<script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="dist/components.js" type="text/javascript"></script>
Final Outcome and working
<!DOCTYPE html>
<html dir="ltr" data-config='{"style": "calico"}'>
<head>
<link rel="stylesheet" href="dist/all.css">
</head>
<body ng-app="MyApp">
<div ui-view></div>
<!-- Custom JS Libries -->
<script src="dist/js/custom.js" type="text/javascript"></script>
<!-- AngularJS -->
<script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="dist/components.js" type="text/javascript"></script>
</body>
</html>

This is how i get it solved.
In your app.js, create is on controller,
add the controller name to ur index body
the convert the template js to a method.
then create a scope method in your app.js controller.
In the scope method, call the template js method
Inside the ui-view html template or ur dashboard, use ng-init to call the scope method of your app.js controller using
Here is the working example:
index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="zeusWeb" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="zeusWeb" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="zeusWeb" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="zeusWeb" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Screening Manager</title>
<meta name="keywords" content="education, institution, management, portal,screening,application">
<meta name="description" content="education, institution, management, portal,screening,application">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta name="author" content="K-Devs System Solutions">
<meta name="owner" content="Kazeem Olanipekun">
<meta name="verified by" content="K-Devs System Solutions">
<meta name="googlebot" content="noodp">
<meta name="google" content="translate">
<meta name="revisit-after" content="1 month">
<!-- build:css css/main.css-->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/angular-loading-bar/build/loading-bar.css" />
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/bootstrap-daterangepicker/daterangepicker.css" />
<link rel="stylesheet" href="bower_components/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css" />
<link rel="stylesheet" href="bower_components/animate.css/animate.css" />
<link rel="stylesheet" href="bower_components/iCheck/skins/flat/blue.css" />
<link rel="stylesheet" href="bower_components/nprogress/nprogress.css" />
<link rel="stylesheet" href="bower_components/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.css" />
<link rel="stylesheet" href="bower_components/switchery/dist/switchery.css" />
<!--endbower-->
<!--custom:css-->
<link href="template.css" rel="stylesheet">
<link rel="stylesheet" href="app.css">
<!-- endcustom css-->
<!-- endbuild -->
<link rel="shortcut icon" href="images/screening.ico" type='image/x-icon'/>
<link rel="icon" href="images/screening.ico" type="image/x-icon"/>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-ng-controller="zeusWebCtrl" class="nav-md footer_fixed">
<!--[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]-->
<data ui-view ng-cloak></data>
<!-- build:js js/vendors.js-->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-mocks/angular-mocks.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-loading-bar/build/loading-bar.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/moment/moment.js"></script>
<script src="bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="bower_components/jquery-mousewheel/jquery.mousewheel.js"></script>
<script src="bower_components/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.js"></script>
<script src="bower_components/iCheck/icheck.js"></script>
<script src="bower_components/nprogress/nprogress.js"></script>
<script src="bower_components/bootstrap-progressbar/bootstrap-progressbar.js"></script>
<script src="bower_components/transitionize/dist/transitionize.js"></script>
<script src="bower_components/fastclick/lib/fastclick.js"></script>
<script src="bower_components/switchery/dist/switchery.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js js/main.js-->
<!-- code inclusion-->
<script src="template.js"></script>
<script src="scripts/index.js"></script>
<script src="scripts/dashboard/dashboard.js"></script>
<script src="app.js"></script>
<!--end inclusion -->
<!-- endbuild -->
</body>
</html>
here is the app.js
'use strict';
// Declare app level module which depends on views, and components
var zeusWeb=angular.module('zeusWeb', ['ui.router', 'angular-loading-bar','dashboard']);
zeusWeb.config(['$stateProvider', '$urlRouterProvider','cfpLoadingBarProvider',function ($stateProvider, $urlRouterProvider,cfpLoadingBarProvider) {
$urlRouterProvider.otherwise("/");
/**
* State for the very first page of the app. This is the home page .
*/
$stateProvider.state('home', {
url: "/",
templateUrl: 'views/dashboard/dashboard.html',
controller: 'dashboardCtrl'
});
/*
$stateProvider.state('dashboard', {
url:'/dashboard',
templateUrl: 'views/dashboard/dashboard.html',
controller: 'dashboardCtrl',
controllerAs:'vm'
});*/
/*
$stateProvider.state('dashboard', {
views:{
'body':{
url:'/embed',
templateUrl: 'view1/embed.html',
controller: 'embed',
controllerAs:'vm'
}
}
});*/
}]);
zeusWeb.controller('zeusWebCtrl',['$scope',function ($scope) {
$scope.test = "Testing";
$scope.appTemplate=function () {
template();
};
}]);
here is the embed ui-view dashboard.html
<div class="container body">
<div class="main_container">
<!--sidebar-->
<section data-ng-include="'views/dashboard/sidebar-nav.html'" data-ng-controller="sideBarCtrl as vm"></section>
<!--sidebar-->
<!-- top navigation -->
<section data-ng-include="'views/dashboard/header.html'"></section>
<!-- /top navigation -->
<!-- page content -->
<div class="right_col" role="main" ui-view="body">
hey
<!-- <script>template();</script>-->
</div>
<!-- /page content -->
<!--footer-->
<section data-ng-include="'views/dashboard/footer.html'"></section>
<!--footer-->
</div>
</div>
<div data-ng-init="$parent.appTemplate()"></div>
Please note that if you are having an asynchronous inject sidebars html based on roles. make sure you have a default sidebar html that will put this insted of the dashboard and also make sure that the default sidebar will be loaded last after all other sidebars has loaded successfully.
in my case, here is a sample example of the sidebars.
school admin html sidebar
<div class="menu_section">
<h3>Live On</h3>
<ul class="nav side-menu">
<li><a><i class="fa fa-bug"></i> Additional Pages <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li>E-commerce</li>
<li>Projects</li>
<li>Project Detail</li>
<li>Contacts</li>
<li>Profile</li>
</ul>
</li>
<li><a><i class="fa fa-windows"></i> Extras <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li>403 Error</li>
<li>404 Error</li>
<li>500 Error</li>
<li>Plain Page</li>
<li>Login Page</li>
<li>Pricing Tables</li>
</ul>
</li>
<li><a><i class="fa fa-sitemap"></i> Multilevel Menu <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li>Level One
<li><a>Level One<span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li class="sub_menu">Level Two
</li>
<li>Level Two
</li>
<li>Level Two
</li>
</ul>
</li>
<li>Level One
</li>
</ul>
</li>
<li><i class="fa fa-laptop"></i> Landing Page <span class="label label-success pull-right">Coming Soon</span></li>
</ul>
</div>
then, let assume that is the last sidebar of the user, then you then call the default sidebar to call the function
default sidebar html
<div data-ng-init="$parent.appTemplate()"></div>`enter code here

Related

ng-view will not work

I have searched throughout the entire web, but I cannot find anyone with an answer. I am setting up a simple front-end website using the original Angular, AngularJS. Unfortunately, I cannot determine why ng-view will not display any of my "partials" (other html pages). Can anyone lend me a second set of eyes and tell me what simple mistake I am making? Thank you in advance.
// This is the app.js file
"use strict";
console.log("App.js is connected!");
// Here, you name your app (which goes into your HTML body) and then
// insert any Angular dependencies (ngRoute allows you to use the $routeProvider)
var app = angular.module('CashExpress', ['ngRoute']);
// This is the configuraiont function that routes your entire website
app.config(function($routeProvider){
console.log("We in here!!");
$routeProvider.
when('/', {
templateURL: 'partials/MainMenu.html',
controller: 'MainMenuCtrl'
}).
when('/reports', {
// Links to the HTML page
templateURL: "partials/Reports.html",
// Links to the controller in the controller file
controller: "ReportsCtrl"
}).
when('/StoreStatistics', {
templateURL: "partials/StoreStatistics.html",
controller: "StoreStatisticsCtrl"
}).
// If an error occurs, the user will be directed to the home page
otherwise('/');
});
<!-- This is the index -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cash Express, LLC Beta</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.1/css/bulma.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body ng-app="CashExpress">
<!-- Store Stats -->
<section class="hero is-success " ng-include="'partials/StoreStatistics.html'"></section>
<!-- End of Store Stats -->
<a class="button is-primary is-outlined" ng-href="#!/">Home</a>
<a class="button is-info is-outlined" ng-href="#!/reports">Reports</a>
<!-- Dynamic Page -->
<section class="section">
<div ng-view></div>
</section>
<section ng-include="'partials/MainMenu'"></section>
<!-- Node Modules -->
<script type="text/javascript" src="lib/node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="lib/node_modules/angular-route/angular-route.min.js"></script>
<!-- Angular app which is dependent on above scripts -->
<script type="text/javascript" src="app/app.js"></script>
<script type="text/javascript" src="app/controllers/MainMenu.js"></script>
<script type="text/javascript" src="app/controllers/StoreStatistics.js"></script>
<script type="text/javascript" src="app/controllers/Reports.js"></script>
</body>
</html>
<!-- This the MainMenu.html page -->
<!-- Main Menu -->
<div class="container is-fluid">
<div class="notification">
This container is <strong>centered</strong> on desktop.
</div>
<a class="button is-primary is-outlined" ng-href="/">Home</a>
<a class="button is-info is-outlined" href="#!/reports">Reports</a>
</div>
<!-- End of Main Menu -->
Nothing wrong with the syntax, just make sure the template url is correct
// This is the app.js file
"use strict";
console.log("App.js is connected!");
// Here, you name your app (which goes into your HTML body) and then
// insert any Angular dependencies (ngRoute allows you to use the $routeProvider)
var app = angular.module('CashExpress', ['ngRoute']);
// This is the configuraiont function that routes your entire website
app.config(function($routeProvider){
console.log("We in here!!");
$routeProvider.
when('/', {
template: "<div>MENU</div>"
}).
when('/reports', {
// Links to the HTML page
template: "<div>REPORTS</div>"
}).
when('/StoreStatistics', {
template: "<div>STORE</div>"
}).
// If an error occurs, the user will be directed to the home page
otherwise('/');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-route.min.js"></script>
<!-- This is the index -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cash Express, LLC Beta</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.1/css/bulma.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body ng-app="CashExpress">
<!-- Store Stats -->
<section class="hero is-success " ng-include="'partials/StoreStatistics.html'"></section>
<!-- End of Store Stats -->
<a class="button is-primary is-outlined" ng-href="#!/">Home</a>
<a class="button is-info is-outlined" ng-href="#!/reports">Reports</a>
<!-- Dynamic Page -->
<section class="section">
<div ng-view></div>
</section>
<!-- Node Modules -->
<script type="text/javascript" src="lib/node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="lib/node_modules/angular-route/angular-route.min.js"></script>
<!-- Angular app which is dependent on above scripts -->
<script type="text/javascript" src="app/app.js"></script>
<script type="text/javascript" src="app/controllers/MainMenu.js"></script>
<script type="text/javascript" src="app/controllers/StoreStatistics.js"></script>
<script type="text/javascript" src="app/controllers/Reports.js"></script>
</body>
</html>
You have excess syntax.. remove /
Try this
<a class="button is-primary is-outlined" href="#/!">Home</a>
<a class="button is-info is-outlined" href="#!reports">Reports</a>

AngularJS controller works but does not load html page

I have some unexpected problem with my controller, which occured during building 1st angular project, just like in here: https://www.youtube.com/watch?v=8-ZQHv70BCw&t=2119s
The problem is my link to home page does not load, it has no effect whatsoever, even when console shows the message and does not return any errors. I test this on plunkr.
index.html:
<!DOCTYPE HTML>
<html lang="en" ng-app="computer">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Computer Solutions</title>
<!-- Bootstrap core CSS -->
<link href="bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- The justified navigation menu is meant for single line per list item.
Multiple lines will require custom code not provided by Bootstrap. -->
<div class="masthead">
<h3 class="text-muted">Computer solutions</h3>
<nav>
<ul class="nav nav-justified">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div ng-controller='MainCtrl'>
<div ng-view></div>
</div>
<!-- Site footer -->
<footer class="footer">
<p>© 2016 Company, Inc.</p>
</footer>
</div> <!-- /container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js"></script>
<script src="script.js"></script>
</body>
</html>
script.js
var app = angular.module("computer",['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/main', {
templateUrl: 'main.html',
controller: 'MainCtrl'
});
}])
.controller('MainCtrl', [function(){
console.log('this is mainctrl');
}]);
and main.html
this is main.
Thanks in advance, Michał
Changed your imports to version 1.4.8. The version you had included seems to have problems on $route definition without a otherwise :
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
I've also added the other states, and should all be working.
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/main', {
templateUrl: 'main.html',
controller: 'MainCtrl'
}).
when('/about', {
templateUrl: 'about.html',
}).
when('/services', {
templateUrl: 'services.html',
}).
when('/contact', {
templateUrl: 'contact.html',
})
}])
See working version : https://plnkr.co/edit/ebB3GAnoDSunsHK4bpme
I guess u have mentioned Controller(MainCtrl) in html and in routeProvider as well. Try removing one of the places.
check https://stackoverflow.com/a/27314659/3821223

Function problems in AngularJs

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.

how to include controller.js into ng-include html page?

this is home.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>SPM</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../css/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="../css/common/common.css" />
<link rel="stylesheet" type="text/css" href="../js/treeview/css/angular.treeview.css">
<script src="../js/jquery/jquery-2.1.1.min.js"></script>
<script src="../js/bootstrap/bootstrap.js"></script>
<script type="text/javascript" src="../js/angular/angular.min.js"></script>
<script type="text/javascript" src="../js/treeview/angular.treeview.min.js"></script>
<script type="text/javascript" src="../js/AJcontrollers/spmControllers.js"></script>
<script type='text/javascript'>//<![CDATA[
//angular module
'use strict';
alert("1");
var myApp = angular.module('myApp', ['angularTreeview','ngLoadScript']);
myApp.controller('commonController', ['$scope', '$http', function($scope, $http) {
$scope.menus = [
{ link : '/summary', treeState : '' , url: 'body.html'},
{ link : '/indicator', treeState : '' , url: 'manageHierarchy.html'}
];
$scope.menu = $scope.menus[0];
}]);
</script>
</head>
<body ng-controller="commonController">
<div>
<div ng-include="'head.html'"></div>
</div>
<!-- footer -->
<footer class="footer">
<div ng-include="'footer.html'"></div>
</footer>
<!-- footer -->
</body>
</html>
and
head.html is
<script type='text/javascript'>
myApp.controller('headController', ['$scope', '$http', function($scope, $http) {
$scope.change = function (param){
alert(param);
};
}]);
</script>
<div ng-controller="headController">
details......
</div>
use angularjs version 1.3.7
problem is 'can't find headController'
in my code what shoud i do ?
can i change my angular version?
1.2.X version can allow function headController($scope){ .....};
but 1.3.7 not work
what can i do ?
This is a know issue that has been reported.
https://github.com/angular/angular.js/issues/3756
https://gist.github.com/endorama/7369006
Long story short, the script tag is a special little flower and angular does not treat it as such. If you include jquery before you include angular this issue will resolve itself. Otherwise you can do the script lazy loading technique that the github links recommend.
Or just move the script tag from head.html and put it on home.html since it will always be needed. (Disclaimer: I would not do this for an app of any size and complexity, but for something small it is the easiest solution. Of course creating js files and including them via seperate scripts would be best.)

Angular with ui.bootstrap rendering blank page

I used Yeoman to create an angular application that included bootstrap. Then, I used Bower to install ui.bootstrap using the instructions on the readme at https://github.com/angular-ui/bootstrap.
I am now trying to adapt the carousel example at http://angular-ui.github.io/bootstrap/.
When I include ui.bootstrap, I just get a blank page. I tried the page in Chrome and Firefox and don't get any errors or output in the console.
Here's my js (cat.js):
'use strict';
angular.module('yoApp', ['ui.bootstrap'])
.controller('CatCtrl', function ($scope, $http) {
var cats = $http.get('/rt/cats.json')
.success(
function (data, status, headers, config) {
$scope.slides = data;
});
$scope.myInterval = 5000;
var slides = $scope.slides;
$scope.addSlide = function() {
var newWidth = 200 + ((slides.length + (25 * slides.length)) % 150);
slides.push({
image: 'http://placekitten.com/' + newWidth + '/200',
text: ['More','Extra','Lots of','Surplus'][slides.length % 4] + ' ' +
['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4]
});
};
for (var i=0; i<4; i++) {
$scope.addSlide();
}
});
I tried this with and without the http.get.
The html page:
<carousel interval="myInterval">
<slide ng-repeat="slide in slides" active="slide.active">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{$index}}</h4>
<p>{{slide.text}}</p>
</div>
</slide>
</carousel>
<div class="row-fluid">
<div class="span6">
<ul>
<li ng-repeat="slide in slides">
<button class="btn btn-mini" ng-class="{'btn-info': !slide.active, 'btn-success': slide.active}" ng-disabled="slide.active" ng-click="slide.active = true">select</button>
{{$index}}: {{slide.text}}
</li>
</ul>
<a class="btn" ng-click="addSlide()">Add Slide</a>
</div>
<div class="span6">
Interval, in milliseconds: <input type="number" ng-model="myInterval">
<br />Enter a negative number to stop the interval.
</div>
</div>
I have my route set up:
'use strict';
angular.module('yoApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ui.bootstrap'
])
.config(function ($routeProvider) {
$routeProvider
.when('/cat', {
templateUrl: 'views/cat.html',
controller: 'CatCtrl'
})
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
});
The weird thing is that when I take out the ['ui.bootstrap'] in cat.js, part of the page actually renders but I get these errors in Chrome:
> TypeError: Cannot read property 'length' of undefined
at Object.$scope.addSlide (http://localhost:9000/scripts/controllers/cat.js:14:34)
at new <anonymous> (http://localhost:9000/scripts/controllers/cat.js:22:12)
at invoke (http://localhost:9000/bower_components/angular/angular.js:3000:28)
at Object.instantiate (http://localhost:9000/bower_components/angular/angular.js:3012:23)
at http://localhost:9000/bower_components/angular/angular.js:4981:24
at update (http://localhost:9000/bower_components/angular/angular.js:14509:26)
at Object.Scope.$broadcast (http://localhost:9000/bower_components/angular/angular.js:8468:28)
at http://localhost:9000/bower_components/angular/angular.js:7614:26
at wrappedCallback (http://localhost:9000/bower_components/angular/angular.js:6995:59)
at wrappedCallback (http://localhost:9000/bower_components/angular/angular.js:6995:59) angular.js:5930
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:9000/template/carousel/slide.html
Error: Failed to load template: template/carousel/slide.html
at Error (<anonymous>)
at http://localhost:9000/bower_components/angular/angular.js:4725:17
at http://localhost:9000/bower_components/angular/angular.js:9144:11
at wrappedErrback (http://localhost:9000/bower_components/angular/angular.js:7004:57)
at http://localhost:9000/bower_components/angular/angular.js:7080:53
at Object.Scope.$eval (http://localhost:9000/bower_components/angular/angular.js:8218:28)
at Object.Scope.$digest (http://localhost:9000/bower_components/angular/angular.js:8077:25)
at Object.Scope.$apply (http://localhost:9000/bower_components/angular/angular.js:8304:24)
at done (http://localhost:9000/bower_components/angular/angular.js:9357:20)
at completeRequest (http://localhost:9000/bower_components/angular/angular.js:9520:7)
Any ideas on what I could be doing wrong? I've been able to get other features to work in other controllers and can get plain text to render inside the Bootstrap theme, but for some reason I am not able to get the carousel to work.
Here's my index.html with my includes after following pkozlowski-opensource's suggestion. I am only able to get the carousel page to render by leaving out the ['ui.bootstrap'] in the module declaration so I must still be doing something wrong.
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/bootstrap.css">
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
</head>
<body ng-app="yoApp">
<!--[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]-->
<!--[if lt IE 9]>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->
<!-- Add your site or application content here -->
<div class="container" ng-view=""></div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-X');
ga('send', 'pageview');
</script>
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<!-- build:js scripts/plugins.js -->
<!-- // <script src="bower_components/bootstrap-sass/js/bootstrap-affix.js"></script>
// <script src="bower_components/bootstrap-sass/js/bootstrap-alert.js"></script>
// <script src="bower_components/bootstrap-sass/js/bootstrap-dropdown.js"></script>
// <script src="bower_components/bootstrap-sass/js/bootstrap-tooltip.js"></script>
// <script src="bower_components/bootstrap-sass/js/bootstrap-modal.js"></script>
// <script src="bower_components/bootstrap-sass/js/bootstrap-transition.js"></script>
// <script src="bower_components/bootstrap-sass/js/bootstrap-button.js"></script>
// <script src="bower_components/bootstrap-sass/js/bootstrap-popover.js"></script>
// <script src="bower_components/bootstrap-sass/js/bootstrap-typeahead.js"></script>
// <script src="bower_components/bootstrap-sass/js/bootstrap-carousel.js"></script>
// <script src="bower_components/bootstrap-sass/js/bootstrap-scrollspy.js"></script>
// <script src="bower_components/bootstrap-sass/js/bootstrap-collapse.js"></script> -->
<!-- // <script src="bower_components/bootstrap-sass/js/bootstrap-tab.js"></script> -->
<!-- endbuild -->
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<!-- build:js scripts/modules.js -->
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="//localhost:35729/livereload.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers/cat.js"></script>
<!-- endbuild -->
</body>
</html>
As #Elise Chant pointed out in the comments above - including:
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
fixed the 404 errors referencing the /template/X.html files for me.

Categories