Twitter Bootstrap Question posted in

Angular example from the web not working – Twitter bootstrap

I’m beginning with Angular and I saw this example in this page http://tutorialzine.com/2013/08/learn-angularjs-5-examples/ and I’m trying to reproduce some of them.

The example 4 looks like something I can use right away in the system I’m working on right now.

I couldn’t get it to work integrated on my system, so I isolated the example in a single file and I’m getting the exact same result as in my system.

The console gives the the following error:

angular.js:13236Error: [ng:areq] http://errors.angularjs.org/1.5.0/ng/areq?p0=InstantSearchController&p1=not%20a%20function%2C%20got%20undefined
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:6:416
at sb (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:23:63)
at Sa (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:23:150)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:86:318
at A (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:64:17)
at u (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:65:8)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:58:136)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:57:279
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:21:88

I’m trying to figure out why it says InstantSearchController is not a function, it should be working since it’s a copy and paste from a working example from the web.

I was thinking things should be declared in a certain order but even moving things around in the page didn’t give me any result.

Maybe the working example and the code being shown are different.

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<style type="text/css">
    *{
	margin:0;
	padding:0;
}

body{
	font:15px/1.3 'Open Sans', sans-serif;
	color: #5e5b64;
	text-align:center;
}

a, a:visited {
	outline:none;
	color:#389dc1;
}

a:hover{
	text-decoration:none;
}

section, footer, header, aside, nav{
	display: block;
}

/*-------------------------
	The search input
--------------------------*/

.bar{
	background-color:#5c9bb7;

	background-image:-webkit-linear-gradient(top, #5c9bb7, #5392ad);
	background-image:-moz-linear-gradient(top, #5c9bb7, #5392ad);
	background-image:linear-gradient(top, #5c9bb7, #5392ad);

	box-shadow: 0 1px 1px #ccc;
	border-radius: 2px;
	width: 400px;
	padding: 14px;
	margin: 45px auto 20px;
	position:relative;
}

.bar input{
	background:#fff no-repeat 13px 13px;
	background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkU5NEY0RTlFMTA4NzExRTM5RTEzQkFBQzMyRjkyQzVBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkU5NEY0RTlGMTA4NzExRTM5RTEzQkFBQzMyRjkyQzVBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RTk0RjRFOUMxMDg3MTFFMzlFMTNCQUFDMzJGOTJDNUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RTk0RjRFOUQxMDg3MTFFMzlFMTNCQUFDMzJGOTJDNUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4DjA/RAAABK0lEQVR42pTSQUdEURjG8dOY0TqmPkGmRcqYD9CmzZAWJRHVRIa0iFYtM6uofYaiEW2SRJtEi9YxIklp07ZkWswu0v/wnByve7vm5ee8M+85zz1jbt9Os+WiGkYdYxjCOx5wgFeXUHmtBSzpcCGa+5BJTCjEP+0nKWAT8xqe4ArPGEEVC1hHEbs2oBwdXkM7mj/JLZrad437sCGHOfUtcziutuYu2v8XUFF/4f6vMK/YgAH1HxkBYV60AR31gxkBYd6xAeF3VzMCwvzOBpypX8V4yuFRzX2d2gD/l5yjH4fYQEnzkj4fae5rJulF2sMXVrAsaTWttRFu4Osb+1jEDT71/ZveyhouTch2fINQL9hKefKjuYFfuznXWzXMTabyrvfyIV3M4vhXgAEAUMs7K0J9UJAAAAAASUVORK5CYII=);

	border: none;
	width: 100%;
	line-height: 19px;
	padding: 11px 0;

	border-radius: 2px;
	box-shadow: 0 2px 8px #c4c4c4 inset;
	text-align: left;
	font-size: 14px;
	font-family: inherit;
	color: #738289;
	font-weight: bold;
	outline: none;
	text-indent: 40px;
}

ul{
	list-style: none;
	width: 428px;
	margin: 0 auto;
	text-align: left;
}

ul li{
	border-bottom: 1px solid #ddd;
	padding: 10px;
	overflow: hidden;
}

ul li img{
	width:60px;
	height:60px;
	float:left;
	border:none;
}

ul li p{
	margin-left: 75px;
	font-weight: bold;
	padding-top: 12px;
	color:#6e7a7f;
}
</style>
</head>
<body>
    <!-- Initialize a new AngularJS app and associate it with a module named "instantSearch"-->
    <div ng-app="instantSearch" ng-controller="InstantSearchController">

        <div class="bar">
            <!-- Create a binding between the searchString model and the text field -->
            <input type="text" ng-model="searchString" placeholder="Enter your search terms" />
        </div>

        <ul>
            <!-- Render a li element for every entry in the items array. Notice
                 the custom search filter "searchFor". It takes the value of the
                 searchString model as an argument.
             -->
            <li ng-repeat="i in items | searchFor:searchString">
                <a href="{{i.url}}"><img ng-src="{{i.image}}" /></a>
                <p>{{i.title}}</p>
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    // Define a new module for our app. The array holds the names of dependencies if any.
    var app = angular.module("instantSearch", []);

    // Create the instant search filter

    app.filter('searchFor', function () {

        // All filters must return a function. The first parameter
        // is the data that is to be filtered, and the second is an
        // argument that may be passed with a colon (searchFor:searchString)

        return function (arr, searchString) {

            if (!searchString) { 
                return arr;
            }

            var result = [];

            searchString = searchString.toLowerCase();

            // Using the forEach helper method to loop through the array
            angular.forEach(arr, function (item) {

                if (item.title.toLowerCase().indexOf(searchString) !== -1) {
                    result.push(item);
                }

            });

            return result;
        };

    });

    // The controller

    function InstantSearchController($scope) {

        // The data model. These items would normally be requested via AJAX,
        // but are hardcoded here for simplicity. See the next example for
        // tips on using AJAX.

        $scope.items = [
            {
                url: 'http://tutorialzine.com/2013/07/50-must-have-plugins-for-extending-twitter-bootstrap/',
                title: '50 Must-have plugins for extending Twitter Bootstrap',
                image: 'http://cdn.tutorialzine.com/wp-content/uploads/2013/07/featured_4-100x100.jpg'
            },
            {
                url: 'http://tutorialzine.com/2013/08/simple-registration-system-php-mysql/',
                title: 'Making a Super Simple Registration System With PHP and MySQL',
                image: 'http://cdn.tutorialzine.com/wp-content/uploads/2013/08/simple_registration_system-100x100.jpg'
            },
            {
                url: 'http://tutorialzine.com/2013/08/slideout-footer-css/',
                title: 'Create a slide-out footer with this neat z-index trick',
                image: 'http://cdn.tutorialzine.com/wp-content/uploads/2013/08/slide-out-footer-100x100.jpg'
            },
            {
                url: 'http://tutorialzine.com/2013/06/digital-clock/',
                title: 'How to Make a Digital Clock with jQuery and CSS3',
                image: 'http://cdn.tutorialzine.com/wp-content/uploads/2013/06/digital_clock-100x100.jpg'
            },
            {
                url: 'http://tutorialzine.com/2013/05/diagonal-fade-gallery/',
                title: 'Smooth Diagonal Fade Gallery with CSS3 Transitions',
                image: 'http://cdn.tutorialzine.com/wp-content/uploads/2013/05/featured-100x100.jpg'
            },
            {
                url: 'http://tutorialzine.com/2013/05/mini-ajax-file-upload-form/',
                title: 'Mini AJAX File Upload Form',
                image: 'http://cdn.tutorialzine.com/wp-content/uploads/2013/05/ajax-file-upload-form-100x100.jpg'
            },
            {
                url: 'http://tutorialzine.com/2013/04/services-chooser-backbone-js/',
                title: 'Your First Backbone.js App – Service Chooser',
                image: 'http://cdn.tutorialzine.com/wp-content/uploads/2013/04/service_chooser_form-100x100.jpg'
            }
        ];

    }
</script>
</html>
Tags:

2

Answers


  1. 0

    This is because your InstantSearchController is not registered in angular application. You should do it like this

    app.controller("InstantSearchController", function (....) {
    ....
});

    Also it is not good idea to bootstrap your application on same element as controller (Either via ng-app attribute or programatically). Application should be “global” and inside of the app there should be controllers

    Login or Signup to reply.
  2. 0

    InstantSearchController isn’t being defined as a controller. Instead of just creating a function named that, it should be done like this:

    app.controller('InstantSearchController', function($scope) { ... });

    <html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<style type="text/css">
    *{
	margin:0;
	padding:0;
}

body{
	font:15px/1.3 'Open Sans', sans-serif;
	color: #5e5b64;
	text-align:center;
}

a, a:visited {
	outline:none;
	color:#389dc1;
}

a:hover{
	text-decoration:none;
}

section, footer, header, aside, nav{
	display: block;
}

/*-------------------------
	The search input
--------------------------*/

.bar{
	background-color:#5c9bb7;

	background-image:-webkit-linear-gradient(top, #5c9bb7, #5392ad);
	background-image:-moz-linear-gradient(top, #5c9bb7, #5392ad);
	background-image:linear-gradient(top, #5c9bb7, #5392ad);

	box-shadow: 0 1px 1px #ccc;
	border-radius: 2px;
	width: 400px;
	padding: 14px;
	margin: 45px auto 20px;
	position:relative;
}

.bar input{
	background:#fff no-repeat 13px 13px;
	background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkU5NEY0RTlFMTA4NzExRTM5RTEzQkFBQzMyRjkyQzVBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkU5NEY0RTlGMTA4NzExRTM5RTEzQkFBQzMyRjkyQzVBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RTk0RjRFOUMxMDg3MTFFMzlFMTNCQUFDMzJGOTJDNUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RTk0RjRFOUQxMDg3MTFFMzlFMTNCQUFDMzJGOTJDNUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4DjA/RAAABK0lEQVR42pTSQUdEURjG8dOY0TqmPkGmRcqYD9CmzZAWJRHVRIa0iFYtM6uofYaiEW2SRJtEi9YxIklp07ZkWswu0v/wnByve7vm5ee8M+85zz1jbt9Os+WiGkYdYxjCOx5wgFeXUHmtBSzpcCGa+5BJTCjEP+0nKWAT8xqe4ArPGEEVC1hHEbs2oBwdXkM7mj/JLZrad437sCGHOfUtcziutuYu2v8XUFF/4f6vMK/YgAH1HxkBYV60AR31gxkBYd6xAeF3VzMCwvzOBpypX8V4yuFRzX2d2gD/l5yjH4fYQEnzkj4fae5rJulF2sMXVrAsaTWttRFu4Osb+1jEDT71/ZveyhouTch2fINQL9hKefKjuYFfuznXWzXMTabyrvfyIV3M4vhXgAEAUMs7K0J9UJAAAAAASUVORK5CYII=);

	border: none;
	width: 100%;
	line-height: 19px;
	padding: 11px 0;

	border-radius: 2px;
	box-shadow: 0 2px 8px #c4c4c4 inset;
	text-align: left;
	font-size: 14px;
	font-family: inherit;
	color: #738289;
	font-weight: bold;
	outline: none;
	text-indent: 40px;
}

ul{
	list-style: none;
	width: 428px;
	margin: 0 auto;
	text-align: left;
}

ul li{
	border-bottom: 1px solid #ddd;
	padding: 10px;
	overflow: hidden;
}

ul li img{
	width:60px;
	height:60px;
	float:left;
	border:none;
}

ul li p{
	margin-left: 75px;
	font-weight: bold;
	padding-top: 12px;
	color:#6e7a7f;
}
</style>
</head>
<body>
    <!-- Initialize a new AngularJS app and associate it with a module named "instantSearch"-->
    <div ng-app="instantSearch" ng-controller="InstantSearchController">

        <div class="bar">
            <!-- Create a binding between the searchString model and the text field -->
            <input type="text" ng-model="searchString" placeholder="Enter your search terms" />
        </div>

        <ul>
            <!-- Render a li element for every entry in the items array. Notice
                 the custom search filter "searchFor". It takes the value of the
                 searchString model as an argument.
             -->
            <li ng-repeat="i in items | searchFor:searchString">
                <a href="{{i.url}}"><img ng-src="{{i.image}}" /></a>
                <p>{{i.title}}</p>
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    // Define a new module for our app. The array holds the names of dependencies if any.
    var app = angular.module("instantSearch", []);

    // Create the instant search filter

    app.filter('searchFor', function () {

        // All filters must return a function. The first parameter
        // is the data that is to be filtered, and the second is an
        // argument that may be passed with a colon (searchFor:searchString)

        return function (arr, searchString) {

            if (!searchString) { 
                return arr;
            }

            var result = [];

            searchString = searchString.toLowerCase();

            // Using the forEach helper method to loop through the array
            angular.forEach(arr, function (item) {

                if (item.title.toLowerCase().indexOf(searchString) !== -1) {
                    result.push(item);
                }

            });

            return result;
        };

    });

    // The controller

    app.controller('InstantSearchController', function($scope) {

        // The data model. These items would normally be requested via AJAX,
        // but are hardcoded here for simplicity. See the next example for
        // tips on using AJAX.

        $scope.items = [
            {
                url: 'http://tutorialzine.com/2013/07/50-must-have-plugins-for-extending-twitter-bootstrap/',
                title: '50 Must-have plugins for extending Twitter Bootstrap',
                image: 'http://cdn.tutorialzine.com/wp-content/uploads/2013/07/featured_4-100x100.jpg'
            },
            {
                url: 'http://tutorialzine.com/2013/08/simple-registration-system-php-mysql/',
                title: 'Making a Super Simple Registration System With PHP and MySQL',
                image: 'http://cdn.tutorialzine.com/wp-content/uploads/2013/08/simple_registration_system-100x100.jpg'
            },
            {
                url: 'http://tutorialzine.com/2013/08/slideout-footer-css/',
                title: 'Create a slide-out footer with this neat z-index trick',
                image: 'http://cdn.tutorialzine.com/wp-content/uploads/2013/08/slide-out-footer-100x100.jpg'
            },
            {
                url: 'http://tutorialzine.com/2013/06/digital-clock/',
                title: 'How to Make a Digital Clock with jQuery and CSS3',
                image: 'http://cdn.tutorialzine.com/wp-content/uploads/2013/06/digital_clock-100x100.jpg'
            },
            {
                url: 'http://tutorialzine.com/2013/05/diagonal-fade-gallery/',
                title: 'Smooth Diagonal Fade Gallery with CSS3 Transitions',
                image: 'http://cdn.tutorialzine.com/wp-content/uploads/2013/05/featured-100x100.jpg'
            },
            {
                url: 'http://tutorialzine.com/2013/05/mini-ajax-file-upload-form/',
                title: 'Mini AJAX File Upload Form',
                image: 'http://cdn.tutorialzine.com/wp-content/uploads/2013/05/ajax-file-upload-form-100x100.jpg'
            },
            {
                url: 'http://tutorialzine.com/2013/04/services-chooser-backbone-js/',
                title: 'Your First Backbone.js App – Service Chooser',
                image: 'http://cdn.tutorialzine.com/wp-content/uploads/2013/04/service_chooser_form-100x100.jpg'
            }
        ];

    });
</script>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search